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#

...props

useRender.ComponentProps<"nav">

Bottom navigation container. It spans the full width and owns the bottom safe-area spacing.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"nav">	—	Bottom navigation container. It spans the full width and owns the bottom safe-area spacing.

MobileNavItem#

selected

boolean

Marks the destination as selected. Sets data-selected and aria-pressed when nativeButton is true.

nativeButtondefault: true

boolean

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.

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#

...props

useRender.ComponentProps<"span">

Destination text, rendered below the icon.