
import { Menu, MenuItem, MenuLink } from '@mav-labs-inc/mavkit-react'
 
<Menu aria-label="App navigation">
  <ul className="menu-list" role="list">
    <MenuItem active>
      <MenuLink href="#" current>Overview</MenuLink>
    </MenuItem>
    <MenuItem disabled>
      <MenuLink href="#" disabled badge="Soon" badgeNeutral>Changelog</MenuLink>
    </MenuItem>
  </ul>
</Menu>

Examples

Vertical, with a section

Horizontal

Props

Renders a <nav> and accepts every native <nav> attribute in addition to the props below.

Prop	Type	Default	Description
variant	'vertical' \| 'horizontal' \| 'multicol'	'vertical'
sticky	boolean	—	Vertical only — sticky positioning + internal scroll for tall sidebars.
underline	boolean	—	Horizontal only — accent underline on the active item instead of a filled pill.

MenuItem

Prop	Type	Default	Description
active	boolean	—	Marks the current nav item via .menu-item.is-active — pair with the nested MenuLink's current prop for aria-current.
disabled	boolean	—	Dims the item and removes it from interaction. The nested MenuLink needs its own disabled prop too.
hasActiveChild	boolean	—	Marks a parent item whose nested submenu contains the active link. ScrollSpyNav sets this automatically at runtime — only pass it for static examples.

Also accepts every native <li> attribute.

MenuLink

Prop	Type	Default	Description
as	'a' \| 'button'	'a'	Element to render — <a> for navigating items, or <button type="button"> for actions that don't navigate.
current	boolean	—	Marks this the active link via aria-current — pair with the parent MenuItem's active prop.
disabled	boolean	—
icon	ReactNode	—	Optional leading .menu-icon.
badge	ReactNode	—	Optional trailing .menu-badge.
badgeLabel	string	—	Accessible name for the badge when it differs from its visible content.
badgeNeutral	boolean	—	Styles the badge gray instead of the accent color.
sub	boolean	—	Smaller, muted style for links nested inside a .menu-submenu.

Also accepts every native <a>/<button> attribute (whichever as renders).


import { menuClasses } from '@mav-labs-inc/mavkit-react'
 
<div className={menuClasses({ variant: 'multicol' })}>…</div>

Menu

Usage