component · mobile navigation

TuxTabBar

Bottom-anchored mobile navigation bar (3-5 tabs). Canonical shape distilled from the 50-mobile-bottom-navigation absorption: flat bar, icon + label, maroon top-edge rule as the active indicator (TUX signature, not Material's underline-bottom or iOS 26's filled glass pill).

Honors env(safe-area-inset-bottom) automatically — clears the iOS home indicator and Android gesture nav. Designed for Tauri Mobile targets; pair desktop / wide-viewport pages with app/layouts/sidebar.vue instead.

three tabs

Canonical 3-tab bar

Active tab gets a maroon top-edge hairline, slightly bolder label, and brand-primary tint. The component clips at 5 items + logs a console warning in dev if you pass more (move overflow into a sidebar or more menu).

<tux-tab-bar :items="tabs" />

five tabs with badge

Maximum width

Five tabs is the consensus maximum. Any badge field renders a small brand-primary pill at the top-right of the icon (good for unread counts, pending items).

<tux-tab-bar
  :items="[
    { label: 'Home', to: '/', icon: 'lucide:home' },
    { label: 'Search', to: '/search', icon: 'lucide:search' },
    { label: 'Tasks', to: '/tasks', icon: 'lucide:check-square', badge: 3 },
    { label: 'Profile', to: '/me', icon: 'lucide:user' },
  ]"
/>

accessibility

aria-current + 44px tap targets

Active tab carries aria-current="page"; the parent nav has the aria-label ("Primary navigation" by default). Tap targets are min 44×44px per Apple HIG — the component pads to that minimum even on dense 5-tab layouts.