NavMenu

Docs

NavMenu

A horizontal list of related views within a consistent context.

Consider renaming

This component is titled very similarly to the Navigation Menu component. Consider renaming it to something like TabMenu or UnderlineNav.

import Link from 'next/link'
import { NavMenu, NavMenuItem } from 'ui'
 
export function NavMenuDemo() {
  return (
    <NavMenu>
      <NavMenuItem active={true}>
        <Link href="#">Overview</Link>
      </NavMenuItem>
      <NavMenuItem active={false}>
        <Link href="#">Invocations</Link>
      </NavMenuItem>
      <NavMenuItem active={false}>
        <Link href="#">Logs</Link>
      </NavMenuItem>
      <NavMenuItem active={false}>
        <Link href="#">Code</Link>
      </NavMenuItem>
    </NavMenu>
  )
}

Usage

NavBar is exclusively used as sub-navigation within PageLayout.

import { NavMenu, NavMenuItem } from 'ui'

<NavMenu>
  <NavMenuItem active={true}>
    <Link href="#">Overview</Link>
  </NavMenuItem>
  <NavMenuItem active={false}>
    <Link href="#">Documentation</Link>
  </NavMenuItem>
</NavMenu>

Examples

With counter badges

You may include counter badges to indicate the number of items within a tab, for example the amount of buckets in storage.

With icons

You may include icons to more clearly represent the content of each tab. Every tab should have an icon (or no icon).

PreviousMenubar

NextNavigation Menu