npm i @velkin/react
import { VuNavbar } from "@velkin/react/navbar";| Prop | Type | Default | Description |
|---|---|---|---|
| items | VuNavbarItem[] | [] | Full menu item model. |
| variant | VuNavbarVariant | "flat" | Bar surface recipe (`flat`/`outline`/`elevated` plus chrome extras `transparent`/`inset`). Default: `"flat"`. |
| tone | VuNavbarTone | "normal" | Neutral surface weight; also relays into flyout panels. Default: `"normal"`. |
| size | VuNavbarSize | "md" | Bar height and link padding scale; also relays into flyout panels. Default: `"md"`. |
| indicator | VuNavbarIndicator | "underline" | Active top-level link affordance (`underline`/`pill`/`dot`/`none`); `pill` is selection chrome — not `radius="full"`. Default: `"underline"`. |
| contained | boolean | false | Centers the bar row with a max inline width. Default: `false`. |
| activeRoute | null | string | null | Active route for highlighting (`activeroute` attr). |
| breakpoint | number | 768 | Mobile breakpoint in pixels. Default: `768`. |
| isMobile | boolean | false | Mobile layout flag (`ismobile` attr). |
| overflowThreshold | number | 0 | Minimum visible items before overflow mode. Default: `0`. |
| justifyBar | string | "space-between" | CSS `justify-content` for the outer bar (`justifybar` attr). |
| justifyBarItems | string | "center" | CSS `justify-content` for the item row (`justifybaritems` attr). |
| pwaOverlay | boolean | false | Window-controls-overlay placement (`pwaoverlay` attr). Default: `false`. |
| customEvent | boolean | false | Emits `vu-activate` instead of `vu-navigate` (`customevent` attr). Default: `false`. |
| menuTrigger | VuNavbarMenuTrigger | "hover" | Desktop submenu open interaction (`menutrigger` attr). Default: `"hover"`. |
| placement | VuNavbarPlacement | "bottom" | Preferred side for top dropdown. Default: `"bottom"`. |
| align | VuNavbarAlign | "start" | Alignment along the trigger edge. Default: `"start"`. |
| offset | number | 8 | Gap in px between trigger and dropdown. Default: `8`. |
| sticky | boolean | false | Pins to the top of the scroll container. Default: `false`. |
| condense | boolean | false | Elevates and shortens the bar when `sticky`. Default: `false`. |
| arialabel | string | — | Mobile drawer accessible name (`arialabel` attr). |
| menuLabel | string | "" | Mobile menu toggle accessible name (`menulabel` attr). |
| closeLabel | string | "" | Mobile drawer close accessible name (`closelabel` attr). |
| menubarLabel | string | "" | Desktop menubar row accessible name (`menubarlabel` attr). |
| ariaLabel | string | "" | Mobile drawer accessible name. |
| Event | Detail | Description |
|---|---|---|
| vu-navigate | VuNavbarNavigateDetail | When a route item is activated. |
| vu-activate | VuNavbarItemActivateDetail | When an item is activated in `customEvent` mode. |
| Slot | Description |
|---|---|
| prepend | Content before navigation items on desktop. |
| append | Content after navigation items on desktop. |
| prepend-mobile | Content before navigation items in mobile mode. |
| append-mobile | Content after navigation items in mobile mode. |
| header | Header content for the mobile drawer. |
| footer | Footer content for the mobile drawer. |
| Part | Description |
|---|---|
| nav-desktop | Desktop navigation container. |
| nav-mobile | Mobile navigation container. |
| nav-bar | Navigation bar container. |
| nav-link | Desktop top-level nav control. |
| top-menu | Desktop dropdown panel. |
| nested-menu | Nested flyout panel. |
| Method | Description |
|---|---|
| openMenu | - Opens the mobile drawer menu. |
| closeMenu | - Closes mobile drawer and desktop submenus. |
| toggleMenu | - Toggles the mobile drawer menu. |
| closeMenus | - Closes all open menus. |
| Name | Definition |
|---|---|
| string | null | |
| |
| |
| |
| |
| |
| |
| |
| |
|