@darzomc/avara-navbar

Luxury navigation bar component for Avara Stays - A minimal, elegant navbar with mobile support.

Installation

npm install @darzomc/avara-navbar

Peer Dependencies

Make sure you have these installed:

npm install react react-dom lucide-react

Usage

import { AvaraNavbar } from '@darzomc/avara-navbar';
import { DevLinkProvider } from '../site-components/DevLinkProvider';
import { Logo } from '../site-components/Logo';

function Layout() {
  return (
    <>
      <AvaraNavbar 
        DevLinkProvider={DevLinkProvider}
        Logo={Logo}
      />
      {/* Your content */}
    </>
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | DevLinkProvider | React.ComponentType | Yes | - | Your Webflow DevLink provider component | | Logo | React.ComponentType | Yes | - | Your logo component | | navLinks | Array<{label: string, href: string}> | No | Default links | Custom navigation links |

Custom Navigation Links

const customLinks = [
  { label: 'Properties', href: '#properties' },
  { label: 'Experiences', href: '#experiences' },
  { label: 'Contact', href: '#contact' },
];

<AvaraNavbar 
  DevLinkProvider={DevLinkProvider}
  Logo={Logo}
  navLinks={customLinks}
/>

Styling Requirements

This component expects these CSS variables to be defined (from Webflow):

:root {
  --body-font: 'Instrument Sans', sans-serif;
  --heading-font: 'Poppins', sans-serif;
}

Features

• ✅ Responsive design (mobile & desktop)
• ✅ Smooth slide-in mobile menu
• ✅ Sticky navbar on scroll
• ✅ Hover effects
• ✅ Body scroll lock when menu open
• ✅ Luxury brand aesthetic
• ✅ Customizable links

Brand Colors Used

• Background: #FCFAF7 (Warm white)
• Mobile menu: #F8F5F1 (Soft beige)
• Text: #1F1E1D (Muted charcoal)
• Primary: #6C4E47 (Soft brown)

License

MIT

Version History

• 1.0.0 - Initial release