Skip to main content

Site Navigation

Site navigation displays the main navigation of your site. It offers a responsive menu for mobile devices and a full navigation for desktop devices.

Desktop navigation Mobile navigation

Usage​

<x-nav>
    <x-nav.item route="#">{{ __('Features') }}</x-nav.item>
    <x-nav.item route="#">{{ __('How it works') }}</x-nav.item>
    <x-nav.item route="#plans">{{ __('Pricing') }}</x-nav.item>
    <x-nav.item route="#faq">{{ __('FAQ') }}</x-nav.item>
    <x-nav.item route="blog">{{ __('Blog') }}</x-nav.item>
</x-nav>

Navigation component will automatically highlight the current route in the navigation.

You can pass in extra classes to the nav.item component to customize its look and feel.