Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA tab bar with four primary tabs and a More tab that opens a bottom sheet with the remaining destinations, marking the current one and keeping the More tab current when a hidden destination is open. Use this when your phone app has more than five destinations and a few of them are used far less than the rest.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when your phone app has more than five destinations and a few of them are used far less than the rest.
Do not use it for five or fewer destinations (use the plain tab bar) or when every destination is equally important.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
primary | TabBarItem[] | required | The four tabs shown in the bar. |
more | { id: string; label: string }[] | required | Destinations in the sheet. |
value | string | required | Current destination id. |
onValueChange | (id: string) => void | required | Navigate. |
aria-haspopup="dialog"); the bar item is marked current when a destination from the sheet is open.aria-current.The pattern ships with a Testing Library test (bottom-nav-more-sheet.test.tsx) that drives it through roles and the keyboard.