Navbar

The Navbar is simple and includes a responsive navigation bar at the top of the page.

Open in new tab 

/* navbar-layout.blade.php */


<x-navbar>
    
    <x-slot name="left">
        
        <x-navbar-item color="brand" :href="route('home')">
            
            <x-application-logo class="h-5 w-5 text-red-500" />
                
            <x-text class="pl-2" color="none" size="none" content="Example App" />


        </x-navbar-item>


    </x-slot>

        
    <x-slot name="right">
        
        <x-navbar-item content="Docs" :href="route('docs')" />
            
        <x-navbar-item content="Themes" :href="route('themes')" />
            
        <x-navbar-item content="Changelog" :href="route('changelog')" />


    </x-slot>

        
    <x-slot name="mobile">
        
        <x-dropdown-item as="a" :href="route('docs')" content="Docs" />
            
        <x-dropdown-item as="a" :href="route('themes')" content="Themes" />
            
        <x-dropdown-item as="a" :href="route('changelog')" content="Changelog" />


    </x-slot>


</x-navbar>

    
<x-container as="main" size="xl" class="py-4">
    
    <x-card>
        
        <x-title size="2xl" class="mb-2" content="Home" />
            
        <x-divider class="my-4" />


    </x-card>


</x-container>

Component API

Navbar

Prop Description Values
as Change the element tag of the component any
color Set the color of the navbar Dependant on theme
left Set the content on the left of the navbar Slot
right Set the content on the right of the navbar Slot
center Set the content on the center of the navbar Slot
mobile Set the content of the mobile menu, must be dropdown items. Slot
containerSize Set the container size of the navbar Dependant on theme

Navbar Item

Prop Description Values
as Change the element tag of the component any
color Set the color of the navbar item Dependant on theme
href Set the URL of the breadcrumb any
content Set the content of the breadcrumb any