Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add bottom-nav

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::bottom-nav> is the fixed bar at the bottom of a small screen. Usually paired with a sidebar that takes over from md upwards.

Basic Usage

<x-aura::bottom-nav :fixed="false" class="rounded-aura-md border border-aura-surface-200">
    <x-aura::bottom-nav.item href="#" icon="home" label="Home" active />
    <x-aura::bottom-nav.item href="#" icon="search" label="Search" />
    <x-aura::bottom-nav.item href="#" icon="bell" label="Alerts" badge="3" />
    <x-aura::bottom-nav.item href="#" icon="user" label="Profile" />
</x-aura::bottom-nav>
<x-aura::bottom-nav class="md:hidden">
    <x-aura::bottom-nav.item href="/" icon="home" label="Home" :active="request()->is('/')" />
</x-aura::bottom-nav>

Props

Prop Type Default Description
label string|null null Names the navigation. Defaults to the translated "Primary".
fixed bool true Pins it to the bottom of the viewport.

Bottom Nav Item

Prop Type Default Description
href string '#' Sanitised.
icon string|null null Icon name.
label string|null null Text under the icon.
active bool false Marks the current page.
badge string|int|null null A count on the icon.

Accessibility

  • aria-current="page" on the active item. The colour alone says which page you are on, and colour alone is never enough.
  • Name the bar when the page has more than one navigation. "Navigation" three times over tells a listener nothing about which is which.
  • Items are at least 52px tall, comfortably over the 24×24 that WCAG 2.2 asks for.
  • The bar reserves env(safe-area-inset-bottom), so the last item is not sitting under the home indicator on an iPhone.