MenuItemcomponent

MenuItem({ href, children, ...props }: MenuItemProps): ReactNode

Param	Type
`href`	`MenuItemProps`	The link target, used to compute `active`/`proud` against the current URL. required
`.children`	`ReactNode` `[ReactNode, ...ReactNode[]]`	The first child becomes the link label (rendered inside the `<a>`). - Any additional children form the submenu — only rendered when this item is "proud" (an ancestor of the current page). The caller is responsible for wrapping the submenu in a nested `<Menu>` if it wants the CSS `.menu .menu` descendant rules to apply. required readonly

Return
`ReactNode`	The menu item element.

A <li> containing an <a> link, plus optional submenu content shown when this item is "proud".

Reads the current page URL from <Meta> and computes active / proud against its own href.
Splits children into [label, ...after]: label goes inside the <a>; after is rendered as siblings below it, only when proud.

A single <li> link entry inside a <Menu>. It reads the current page URL from the Meta context and automatically marks itself active (exact match) or proud (an ancestor of the current page) — and when proud, reveals its submenu children.

Things to know:

The first child is the link label (rendered inside the <a>). Any additional children form the submenu and are rendered only when the item is proud (the current URL starts with the item's href). Wrap that submenu in a nested <Menu> to get the .menu .menu indentation.
It forwards all ClickableProps — href, onClick, disabled, and so on — to the underlying <Clickable>.
active and proud are computed against the URL from <Router> / <Navigation> context.

Usage

tsx

import { Menu, MenuItem } from "shelving/ui";

<Menu>
  <MenuItem href="/users">
    Users
    <Menu>
      <MenuItem href="/users/active">Active</MenuItem>
      <MenuItem href="/users/archived">Archived</MenuItem>
    </Menu>
  </MenuItem>
  <MenuItem href="/settings">Settings</MenuItem>
</Menu>

Styling

The item link's hooks (defined in Menu.module.css):

Variable	Styles	Default
`--menu-padding`	Link inner padding	`var(--space-xxsmall)`
`--menu-radius`	Link corner radius	`var(--radius-xxsmall)`
`--menu-focus-border`	Focus outline	`var(--stroke-focus) solid var(--color-focus)`
`--menu-hover-background`	Link fill on hover/focus	`var(--tint-90)`
`--menu-hover-color`	Link text colour on hover/focus	`var(--tint-00)`
`--menu-proud-background`	Fill when proud (ancestor of current page)	`transparent`
`--menu-proud`	Text colour when proud	`var(--tint-00)`
`--menu-proud-weight`	Font weight when proud	`var(--weight-strong)`
`--menu-active-background`	Fill when active (current page)	`var(--tint-100)`
`--menu-active-color`	Text colour when active	`var(--tint-00)`
`--menu-active-weight`	Font weight when active	`var(--weight-strong)`

List-level hooks (--menu-gap, --menu-color, the nested-submenu hooks, etc.) are documented on <Menu>.

Global tokens it reads — the tint ladder --tint-00 / --tint-90 / --tint-100, plus --space-xxsmall, --radius-xxsmall, --stroke-focus, --stroke-normal, --color-focus, and --weight-strong.

Examples

<MenuItem href="/settings">Settings</MenuItem>