# Bottom Navigation

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

- Install: `php artisan blatui:add bottom-navigation`
- Source: https://blatui.remix-it.com/r/bottom-navigation.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/bottom-navigation.blade.php

```blade
@props([
    'ariaLabel' => 'Bottom navigation',
])

{{--
    A mobile bottom tab bar. A <nav> landmark holding a flex row of equal-width
    items (each <x-ui.bottom-navigation-item> stretches via flex-1). Border-t,
    bg-background, fixed-ish height (~16). RTL-safe (no physical left/right).
--}}
<nav
    data-slot="bottom-navigation"
    aria-label="{{ $ariaLabel }}"
    {{ $attributes->twMerge('bg-background border-border flex h-16 w-full items-stretch border-t') }}
>
    {{ $slot }}
</nav>
```