@mounaji_npm/navbar

Composable top navigation bar — logo, links, dropdowns, mobile drawer, auth slot.
Token-driven. Zero router dependency.

Install

npm install @mounaji_npm/navbar @mounaji_npm/tokens

Usage

import { Navbar } from '@mounaji_npm/navbar';

<Navbar
  logo={{ text: 'My App', href: '/' }}
  links={[
    { label: 'Features', href: '/features' },
    { label: 'Pricing',  href: '/pricing' },
    {
      label: 'Resources',
      children: [
        { label: 'Docs',  href: '/docs' },
        { label: 'Blog',  href: '/blog' },
      ],
    },
  ]}
  actions={[
    { label: 'Log in',      variant: 'ghost',   href: '/login' },
    { label: 'Get Started', variant: 'primary',  href: '/signup' },
  ]}
  sticky
  isDark
/>

With auth slot

import { Navbar } from '@mounaji_npm/navbar';
import { LoginButton } from '@mounaji_npm/auth';

<Navbar
  logo={{ text: 'My App' }}
  links={[...]}
  authSlot={<LoginButton />}
/>

Props

| Prop | Type | Default | Description | |--------------------|--------------------------|----------|--------------------------------------------------| | logo | LogoConfig | {} | { text?, src?, alt?, href?, onClick? } | | links | NavLink[] | [] | { label, href?, onClick?, icon?, active?, children? } | | actions | NavAction[] | [] | { label, href?, onClick?, variant?, icon?, size? } | | authSlot | ReactNode | – | Injected right of links (e.g. <LoginButton />) | | sticky | boolean | true | position: sticky | | transparent | boolean | false | No background (glass effect on scroll) | | blurOnScroll | boolean | true | Backdrop blur after scroll | | isDark | boolean | true | Dark or light mode token set | | mobileBreakpoint | number | 768 | px below which mobile drawer activates | | height | number | 64 | Navbar height in px | | style | CSSProperties | – | Container override |

Sub-components

import { NavLogo, NavLink, NavDropdown, NavActions, NavHamburger, NavMobileDrawer } from '@mounaji_npm/navbar';

Demo data

import { DEMO_LOGO, DEMO_LINKS, DEMO_ACTIONS } from '@mounaji_npm/navbar';