Component

Navbar

The supported top-navigation primitive: a horizontal row of links with active state. Compose it inside a semantic header with a logo, actions, and search to build a full app bar.

Links with active state

An item without an href renders as a button and reports through onItemSelect, so the bar can drive local state. The active item carries aria-current='page'.

The landmark is named "Main" by default - pass aria-label when the page has another navigation, so screen readers can tell them apart

Router links

renderLink hands each linked item to your router's Link - next/link here - with Fuji's styling already on the content it passes in. These three go to real pages.

The link element is yours: Fuji sets aria-current only on anchors it renders itself, so pass it on the Link
Breadcrumb and Bottom Navigation take the same renderLink

Full app bar

A semantic header composed around Navbar with a logo, primary links, and trailing actions.

Fuji UI

On mobile, hide the Navbar and open the links from a Drawer, as the site header does
itemClassName reaches each item's label span - to tighten the text size in a dense header, for instance

API reference

Prop	Type	Default	Description
items *	NavbarItem[]	None	The links, in display order.
itemClassName	string	None	Additional classes applied to each item's inner label span (e.g. to override its text size).
onItemSelect	((item: NavbarItem, index: number) => void)	None	Called when an item is activated. An item with no `href` needs this to do anything.
renderLink	((item: NavbarItem, children: React.ReactNode, linkProps: NavbarLinkProps) => React.ReactNode)	None	Wraps `href` items in a router link. `linkProps` holds `href`, `aria-current`, `className`, `children`, so `(item, c, props) => <Link {...props} />` works; unspread, they fill gaps.

items *None

NavbarItem[]

The links, in display order.

itemClassNameNone

string

Additional classes applied to each item's inner label span (e.g. to override its text size).

onItemSelectNone

((item: NavbarItem, index: number) => void)

Called when an item is activated. An item with no `href` needs this to do anything.

renderLinkNone

((item: NavbarItem, children: React.ReactNode, linkProps: NavbarLinkProps) => React.ReactNode)

Wraps `href` items in a router link. `linkProps` holds `href`, `aria-current`, `className`, `children`, so `(item, c, props) => <Link {...props} />` works; unspread, they fill gaps.

Also accepts everything from React.HTMLAttributes<HTMLElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent