navbar

import { navbar } from '@markless/ui';

export default function Primaryfunction Primary(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<navbar.root(alias) function root({ value, hover, delay, clickGrace, onChange, children, onFocusout, onKeydown, onPointerover, onPointerout, ...rest }: navbar.NavbarRootProps): Element aria-label="Primary">
		<navbar.item(alias) function item({ value, active, children, onPointerover, onPointerout, ...rest }: navbar.NavbarItemProps): Element value(property) value: stringNames the item. The root's `value` names the item whose dropdown shows. Required.="home">
			<navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element href(property) href?: string | undefined="/" current(property) current?: boolean | undefinedThis link is the page a person is on now. It writes `aria-current="page"`, which the aria-at disclosure-navigation plan makes a priority-1 assertion. Set it on the one link that is the current page, never on the whole section.>Home</navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element>
		</navbar.item(alias) function item({ value, active, children, onPointerover, onPointerout, ...rest }: navbar.NavbarItemProps): Element>
		<navbar.item(alias) function item({ value, active, children, onPointerover, onPointerout, ...rest }: navbar.NavbarItemProps): Element value(property) value: stringNames the item. The root's `value` names the item whose dropdown shows. Required.="products">
			<navbar.itemtrigger(alias) function itemtrigger({ children, onClick, onKeydown, ...rest }: navbar.NavbarItemTriggerProps): Element>Products</navbar.itemtrigger(alias) function itemtrigger({ children, onClick, onKeydown, ...rest }: navbar.NavbarItemTriggerProps): Element>
			<navbar.itemcontent(alias) function itemcontent({ children, onDismiss, onKeydown, ...rest }: navbar.NavbarItemContentProps): Element>
				<navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element href(property) href?: string | undefined="/products/keyboards">Keyboards</navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element>
				<navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element href(property) href?: string | undefined="/products/mice">Mice</navbar.itemlink(alias) function itemlink({ current, children, onKeydown, ...rest }: navbar.NavbarItemLinkProps): Element>
			</navbar.itemcontent(alias) function itemcontent({ children, onDismiss, onKeydown, ...rest }: navbar.NavbarItemContentProps): Element>
		</navbar.item(alias) function item({ value, active, children, onPointerover, onPointerout, ...rest }: navbar.NavbarItemProps): Element>
	</navbar.root(alias) function root({ value, hover, delay, clickGrace, onChange, children, onFocusout, onKeydown, onPointerover, onPointerout, ...rest }: navbar.NavbarRootProps): Element>
}

This is a disclosure, deliberately never a menubar. role="menubar" puts screen readers into application mode and promises desktop-menu behaviour that site navigation does not have. The landmark carries no name of its own, because a page can have a primary nav and a footer nav and an invented "Navigation" on both is two landmarks a reader cannot tell apart — write your own aria-label.

Anatomy

• navbar.root — the <nav> landmark. Name it yourself.
• navbar.item — one top-level entry, named by its required value. It is the element the pointer enters and leaves.
• navbar.itemtrigger — the button that shows and hides one dropdown.
• navbar.itemcontent — one dropdown. It stays in the page when closed.
• navbar.itemlink — a link, at the top level or inside a dropdown. The only part that can carry aria-current="page".

It writes ui-open, ui-closed and ui-active.

Props on navbar.root

Prop	Type	What it does
value	string	Which item's dropdown is showing. Omit it, or pass the empty string, and everything is closed.
hover	boolean	Dropdowns open when the pointer rests on an item. Omit it and they do.
delay	number	How long the pointer must rest before the first dropdown opens. Omit it and it is 200ms.
clickGrace	number	How long after a hover-open a click on the same trigger is ignored. Omit it and it is 300ms.
onChange	(value) => void	Called with the value now showing its dropdown, or the empty string when everything closed.

Everything a <nav> accepts reaches the element too. navbar.item takes its own value and active; navbar.itemlink takes current.