Starter Kit
The Starter Kit includes a responsive design that automatically switches to a bottom navigation bar on mobile
devices.
This component is located at resources/views/components/bottom-bar.blade.php.
1. The Container
The navbar is a fixed element at the bottom of the screen. It is hidden on desktop
(md:hidden)
and uses backdrop-blur for a modern glass effect.
Container Structure
1 <nav x-data="{}" data-bottom-bar2 class="md:hidden fixed bottom-0 inset-x-0 z-[60]3bg-app-shell/90 backdrop-blur4border-t border-gray-200/70 dark:border-gray-800/705supports-[padding:max(0px,env(safe-area-inset-bottom))]">6 <div class="grid grid-cols-5 h-full py-1">7 <!-- Navigation items go here -->8 </div>9 </nav>2. Navigation Items
Each item is a link (<a>) or a button. Use wire:navigate for SPA-like
transitions. The active state can be styled conditionally using request()->routeIs().
Single Item Example
1 <a wire:navigate href="@{{ route('users.table') }}"2 class="flex flex-col items-center justify-center space-y-13@{{ request() - > routeIs('users.*') ? 'text-emerald-600 dark:text-emerald-400' : 'text-gray-500 dark:text-gray-400' }}">4 <x-bt-icon name="users" class="w-6 h-6" />5 <span class="text-[10px] font-medium leading-none">Users</span>6 </a>3. "More" Menu Trigger
If you have more items than fit in the bar, you can add a "More" button that triggers a bottom sheet explicitly via an Alpine event.
Trigger Button
1<button type="button"2 @click="document.body.classList.add('overflow-hidden'); $dispatch('open-more-menu')"3 class="flex flex-col items-center justify-center space-y-1 text-gray-500 dark:text-gray-400">4 <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">5 <path stroke-linecap="round" d="M6 12h.01M12 12h.01M18 12h.01" />6 </svg>7 <span class="text-[10px] font-medium leading-none">More</span>8</button>4. The "More" Sheet
The sheet is a separate component that listens for the open-more-menu event. It handles its
own visibility state and contains the additional menu options.
Bottom Sheet Structure
1 <div x-data="{ open: false }" x-on:open-more-menu.window="open = true" x-cloak x-show="open" 2 class="md:hidden fixed inset-0 z-[70]" style="display:none"> 3 4 <!-- Overlay --> 5 <div class="absolute inset-0 bg-black/40" 6 @click="open=false; document.body.classList.remove('overflow-hidden')"> 7 </div> 8 9 <!-- Content -->10 <div x-trap.noscroll="open"11 class="absolute inset-x-0 bottom-0 rounded-t-2xl bg-app-content12border-t border-gray-200 dark:border-gray-800 p-4 pt-213max-h-[78dvh] overflow-y-auto shadow-2xl">14 15 <!-- Handle & Header -->16 <div class="w-10 h-1 rounded-full mx-auto mb-3 bg-gray-400/60 dark:bg-gray-500/40"></div>17 <div class="relative flex items-center justify-between mb-1">18 <div class="text-sm font-semibold text-gray-700 dark:text-gray-200">More options</div>19 <!-- ... Close button ... -->20 </div>21 22 <!-- Additional Items Grid -->23 <div class="grid grid-cols-2 gap-1.5 mt-1">24 <x-bt-button outline gray label="Dashboard" icon-start="ticket" sm25 href="@{{ route('dashboard') }}" class="w-full"26 @click="open=false; document.body.classList.remove('overflow-hidden')" />27 <!-- Add more buttons here -->28 </div>29 </div>30 </div>