Navigation
Bottom navigation
The label of the current destination is the indicator. Inactive items keep their glyph and drop their word, so the bar stays quiet until you look at it and the active item is the only thing spelled out - and because the label animates its width as well as its opacity, the row re-centres smoothly instead of the words jumping sideways. The pill behind the active item is one shared element, so switching tabs is a single movement rather than two fades.
npx shadcn@latest add @minflow/bottom-navWhere to use it
- The primary navigation of a phone app, where the top of the screen is out of thumb reach.
- Three to five destinations. Fewer is a tab bar; more will not survive a 360px screen.
- Reach for Tabs when the sections belong to one screen rather than being separate destinations.
Variations
Label on the active item
The default, and the right choice for four or five destinations. Only the current item spends space on a word.
Every label shown
Three destinations, or an audience that needs the words. With this few items there is room, and permanent labels remove a small guess.