Skip to content

NaiveNavbar

This component provides a responsive navigation bar. It has nested menu items wrapping NuxtLink for routing with prefetch.

ts
interface MenuLinkRoute {
  label: string;
  icon?: string;
  to?: RouteLocationRaw;
  children?: MenuLinkRoute[];
}

Info

MenuLinkRoute interface can be imported from #build/types/naiveui.

Props

NameTypeDefaultNote
stickybooleantrue
routesMenuLinkRoute[ ]The routes for menu items
drawerRoutesMenuLinkRoute[ ]Overrides routes in the drawer
drawerPlacementtop | right | bottom | leftleft
drawerClosablebooleantrueWhether the drawer content is closable
drawerWidthstring | number100%
menuToggleIconstringph:equals
menuToggleIconSizenumber | string26
menuTogglePlacementright | leftright
menuInvertedbooleanfalseUse inverted style
menuPlacementright | left | centerleftHorizontal menu placement relative to viewport
backIconbooleanfalseEnable back button on mobile devices
backIconSizenumber | string26

Slots

  • start, placed at the left-side of navbar.
  • end, placed at the right-side of navbar.
  • toggle, placed instead of the toggle button.
  • drawer-header, placed at the top of the drawer.
  • drawer-content, placed at the bottom of the drawer-header.
  • drawer-footer, placed at the bottom of the drawer.