MobileNav

Composable bottom navigation for app-owned mobile destinations.

Preview#

Anatomy#

<MobileNavRoot>
  <MobileNavItem selected aria-label="Home">
    <Home />
    <MobileNavLabel>Home</MobileNavLabel>
  </MobileNavItem>
</MobileNavRoot>

API#WIP

MobileNavRoot#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"nav">	—	Bottom navigation container. Its width and safe-area spacing follow the active theme.

MobileNavItem#

Prop	Type	Default	Description
`selected`	boolean	—	Marks the destination as selected. Sets data-selected and aria-pressed when nativeButton is true.
`nativeButton`	boolean	true	When false, skip native button type/aria-pressed wiring so render can replace the host element.
`...props`	useRender.ComponentProps<"button">	—	One app-owned destination. Pass selected and native onClick from the consuming route or local state.

MobileNavLabel#

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Destination text. Brutal renders it below the icon; Elegant keeps the same semantic structure visually hidden.