Dowe

LAYOUT

BottomBar

BottomBar provides persistent route-aware tabs with portable Icon children and an optional featured destination.

MENTAL MODEL

Anchor lower navigation in a Scaffold

Scaffold owns the application height and places BottomBar after the scrolling body, where it remains visible at the lower edge. boxed:true keeps the bar surface full width while centering its tabs at 96rem on web or 1536 logical units on Android and iOS.

Scaffold
  main
    children
  bottomBar
    BottomBar variant:"soft" scheme:"surface" bordered:true boxed:true
      tab href:"/" label:"Home"
        Icon name:"home"
      tab href:"/create" label:"Create" featured:true
        Icon name:"add-circle"
      tab href:"/docs" label:"Docs"
        Icon name:"document"

LIVE EXAMPLE

BottomBar inside its real shell

The complete routed page makes the persistent lower edge and the scrolling main region visible together.

TABS

Route-aware navigation tabs

Each tab requires href, label, and exactly one Icon child. The current page activates the matching href, while featured raises one primary destination.

Use BottomBar from a Scaffold bottomBar region so the shell reserves its full-height layout and the lower navigation remains observable across targets.

API

Props

BottomBar also accepts applicable common spacing, sizing, typography, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

No data