Skip to content

NaiveLayoutNavbar

This component can be used for page layout with navbar. It's based on naive-ui layout.

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

Props

NameTypeDefaultNote
nativeScrollbarbooleanfalse
routesMenuLinkRoute[ ]The routes for the navbar
drawerRoutesMenuLinkRoute[ ]The routes for the drawer
drawerClosablebooleantrueWhether the drawer content is closable
drawerWidthstring | number100%
drawerPlacementtop | right | bottom | leftleft
toggleIconstringph:equals
togglePlacementright | leftright
headerLayoutHeaderPropsPassed to n-layout-header, docs

Slots

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