Component

Bottom Navigation

Mobile tab bar pinned to the bottom of its scroll container, with safe-area padding. Tap between the tabs in any of these.

Bar

The default: full-width, flush with the bottom edge.

position='absolute' here so the bar stays inside the preview frame; it is sticky to its scroll container in real usage
Items with an href render as links and take renderLink for a router Link, as on Navbar; items without one become buttons when onItemSelect is passed

Floating

variant='floating' detaches the bar from the edge as a pill with the panel shadow, for a bar that sits over scrolling content.

Floating, notched, with a centre action

action places a raised primary button in a notch cut from the bar, and the items split evenly either side of it. Give it an aria-label - it is icon-only.

The items split either side of the action, so an even count reads symmetrically
action takes an onClick - here it opens a bottom sheet, the usual job of a centre create button

Active indicators

indicator picks how the active tab is marked, beyond the label and icon colour. Colour alone is not sufficient (WCAG 1.4.1); aria-current='page' is always set regardless.

none

dot

pill

circle

With a badge

Pass a composed icon element to show unread counts or alerts.

API reference

Prop	Type	Default	Description
items *	BottomNavigationItem[]	None	The tabs, in display order.
action	{ icon: React.ReactNode; "aria-label": string; onClick?: React.MouseEventHandler<HTMLButtonElement>; }	None	A raised primary action centred in a notch cut from the bar, items split evenly either side. Rendered as a `<button>`; give it an `aria-label` since it is icon-only.
indicator	"circle" \| "none" \| "dot" \| "pill"	"none"	Non-colour active cue: `"none"` (default), `"dot"` under the label, `"pill"` behind the item, `"circle"` behind the icon. Active items also get `aria-current="page"` (WCAG 1.4.1).
onItemSelect	((item: BottomNavigationItem, index: number) => void)	None	Called when an item is chosen, so a tab bar switching local view state can report the choice (same as `Navbar`). Items with an `href` still navigate; this fires alongside.
position	"sticky" \| "fixed" \| "absolute" \| "static"	"sticky"	`"sticky"` (default) pins to its scroll container's bottom; `"fixed"` to the viewport, escaping any container; `"absolute"` for a `position: relative` parent; `"static"` for manual layouts.
renderLink	((item: BottomNavigationItem, children: React.ReactNode, linkProps: BottomNavigationLinkProps) => React.ReactNode)	None	Wraps each `href` item in a router link. The third argument holds Fuji's anchor props (`href`, `aria-current`, `className`, `onClick`, `children`); spread them or they are merged in for you.
variant	"bar" \| "floating"	"bar"	`"floating"` detaches the bar: inset, fully rounded, with the panel shadow instead of a top border. Default `"bar"`.

items *None

BottomNavigationItem[]

The tabs, in display order.

actionNone

{ icon: React.ReactNode; "aria-label": string; onClick?: React.MouseEventHandler<HTMLButtonElement>; }

A raised primary action centred in a notch cut from the bar, items split evenly either side. Rendered as a `<button>`; give it an `aria-label` since it is icon-only.

indicator"none"

"circle" | "none" | "dot" | "pill"

Non-colour active cue: `"none"` (default), `"dot"` under the label, `"pill"` behind the item, `"circle"` behind the icon. Active items also get `aria-current="page"` (WCAG 1.4.1).

onItemSelectNone

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

Called when an item is chosen, so a tab bar switching local view state can report the choice (same as `Navbar`). Items with an `href` still navigate; this fires alongside.

position"sticky"

"sticky" | "fixed" | "absolute" | "static"

`"sticky"` (default) pins to its scroll container's bottom; `"fixed"` to the viewport, escaping any container; `"absolute"` for a `position: relative` parent; `"static"` for manual layouts.

renderLinkNone

((item: BottomNavigationItem, children: React.ReactNode, linkProps: BottomNavigationLinkProps) => React.ReactNode)

Wraps each `href` item in a router link. The third argument holds Fuji's anchor props (`href`, `aria-current`, `className`, `onClick`, `children`); spread them or they are merged in for you.

variant"bar"

"bar" | "floating"

`"floating"` detaches the bar: inset, fully rounded, with the panel shadow instead of a top border. Default `"bar"`.

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