Component
TabBar
A phone's bottom navigation: three to five destinations within reach of a thumb.
import { TabBar } from '@loidolt/theme-svelte';
Example
Notes
- Items are real links;
currentsetsaria-current="page", which is also the indicator on the edge facing the content. - The label is always rendered and is the accessible name; the
iconsnippet above it is decorative. - Every destination is at least 44px square, and the bar pads its links clear of the home indicator. Put it in
AppShell’stabBarslot to pin it to the bottom of the screen. - Feed it the same list as the topbar links and show one or the other at the compact breakpoint.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
items required | TabBarItem[] | — | Three to five top-level destinations; more than fit a thumb's reach belong in a Drawer. |
class | string | — | |
itemClass | string | — | |
label | string | 'Primary' | Accessible name of the navigation region. |
ref bindable | HTMLElement | null | null |
Plus the attributes of Omit<HTMLAttributes<HTMLElement>, 'children'>, forwarded to the root element.