Components

Bottom Navigation

A mobile bottom tab bar with icons, labels, an active state and badges.

php artisan blatui:add bottom-navigation

App content

{{-- Rendered inside a phone-ish framed container to show the bar in context. --}}
<div class="bg-card mx-auto w-full max-w-sm overflow-hidden rounded-xl border shadow-sm">
    <div class="text-muted-foreground flex h-72 items-center justify-center text-sm">
        App content
    </div>

    <x-ui.bottom-navigation>
        <x-ui.bottom-navigation-item icon="house" label="Home" active />
        <x-ui.bottom-navigation-item icon="search" label="Search" />
        <x-ui.bottom-navigation-item icon="plus" label="Add" />
        <x-ui.bottom-navigation-item icon="bell" label="Alerts" badge="3" />
        <x-ui.bottom-navigation-item icon="user" label="Profile" />
    </x-ui.bottom-navigation>
</div>

API Reference

Props, slots and exposed methods for <x-ui.bottom-navigation>.

Props

Prop	Type	Default	Description
`ariaLabel`	`string`	`'Bottom navigation'`	Accessible name for the <nav> landmark wrapping the tab bar.

Slots

Slot	Description
`default`	The navigation items. Place one <x-ui.bottom-navigation-item> per tab (each takes `icon`, `label`, `href`, `active`, and an optional `badge`); they stretch to equal width across the bar.