Navbar

Docs

The default Navbar component with a sidebar trigger and searchbar.

The default Navbar component with a sidebar toggle and search dialog trigger.

Note: It has been included in the <DocsLayout /> by default.

Usage

import { Nav as OriginalNav } from 'next-docs-ui/nav'
 
export function Nav() {
  return <OriginalNav title="Next Docs" />
}

Prop	Type	Default
`title`	`ReactNode`	-
`url`	`string`	`/`
`transparent`	`boolean`	`false`
`items`	`NavItemProps[]`	-
`links`	`NavLinkProps[]`	-
`enableSidebar`	`boolean`	-
`collapsibleSidebar`	`boolean`	-

As your navbar can be displayed in any pages without a sidebar, you may want to hide the sidebar trigger in specific pages.

<Nav enableSidebar={pathname.startsWith('/docs/') || pathname === '/docs'}>
  ...
</Nav>

Items

You can pass an array of items to the component, it needs a children, href and a boolean indicating whether it is an external link.

const links = [
  {
    children: 'Documentation',
    href: '/docs',
    external: false
  }
]

Links

You can pass an array of links to the component, it needs an icon and label (for aria-label).

const links = [
  {
    label: 'Github',
    icon: <GithubIcon className="h-5 w-5" />,
    href: 'https://github.com/fuma-nama/next-docs',
    external: true
  }
]

Last updated on

Layout

Page

Usage

Disable Sidebar

Items

Links

On this page