Navbars
Navbars are used to navigate through an application. They can contain links, dropdowns, and more. Usually they are within the header, sidebar or page navigation.
1<x-nav id="nav-01">2 <x-nav.item href="/dashboard" icon="home--outline">Dashboard</x-nav.item>3 <x-nav.item href="/projects" icon="folder--outline">Projects</x-nav.item>4 5 <!-- Use route="<name>" for named routes -->6 <x-nav.item route="app.teams" icon="users--outline">Teams</x-nav.item>7 <x-nav.item route="app.user.tasks" icon="document--outline">Tasks</x-nav.item>8</x-nav>Sizes
You can change the size of the navbar by using the size attribute. Available sizes are sm and md.
1<x-nav id="nav-02" size="md">
2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 <x-nav.item icon="folder--outline" current>Projects</x-nav.item> 4 <x-nav.item icon="users--outline">Teams</x-nav.item> 5 <x-nav.item icon="document--outline">Tasks</x-nav.item> 6</x-nav> 7 8<x-nav id="nav-03" size="sm">
9 <x-nav.item icon="home--outline">Dashboard</x-nav.item>10 <x-nav.item icon="folder--outline" current>Projects</x-nav.item>11 <x-nav.item icon="users--outline">Teams</x-nav.item>12 <x-nav.item icon="document--outline">Tasks</x-nav.item>13</x-nav> Active Item
The nav-item tries to guess the current route. If you want to force an item to be active, you can use the current attribute.
1<x-nav id="nav-04">2 <x-nav.item icon="home--outline">Dashboard</x-nav.item>3 <x-nav.item icon="folder--outline" current>Projects</x-nav.item> 4 <x-nav.item icon="users--outline">Teams</x-nav.item>5 <x-nav.item icon="document--outline">Tasks</x-nav.item>6</x-nav>Horizontal
You can use the horizontal attribute to make the navbar horizontal.
1<x-nav id="nav-05" horizontal>
2 <x-nav.item icon="home--outline">Dashboard</x-nav.item>3 <x-nav.item icon="folder--outline" current>Projects</x-nav.item>4 <x-nav.item icon="users--outline">Teams</x-nav.item>5 <x-nav.item icon="document--outline">Tasks</x-nav.item>6</x-nav> Submenu
You can add a submenu to a nav-item by using the submenu slot.
Icons can not be used within submenu items.
1<x-nav id="nav-06"> 2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 4 <x-nav.item icon="folder--outline" current> 5 Projects 6 7 <x-slot:submenu open> 8 <x-nav.item>DataForms.io</x-nav.item> 9 <x-nav.item>Hirely</x-nav.item> 10 <x-nav.item>Basic-Components</x-nav.item> 11 </x-slot:submenu> 12 </x-nav.item> 13 14 <x-nav.item icon="users--outline">Teams</x-nav.item>15 <x-nav.item icon="document--outline">Tasks</x-nav.item>16</x-nav>Nesting Submenus
You can nest submenus by using the submenu slot within a submenu item.
1<x-nav id="nav-07"> 2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 <x-nav.item icon="folder--outline" current> 4 Projects 5 6 <x-slot:submenu open> 7 <x-nav.item>DataForms.io</x-nav.item> 8 <x-nav.item> 9 Hirely 10 <x-slot:submenu> 11 <x-nav.item>Details</x-nav.item> 12 <x-nav.item>Members</x-nav.item> 13 <x-nav.item>Tasks</x-nav.item> 14 </x-slot:submenu> 15 </x-nav.item> 16 <x-nav.item>Basic-Components</x-nav.item> 17 </x-slot:submenu> 18 </x-nav.item>19 <x-nav.item icon="users--outline">Teams</x-nav.item>20 <x-nav.item icon="document--outline">Tasks</x-nav.item>21</x-nav>Dropdowns
Because in horizontal navbars there is no space for submenus, you can use dropdowns to show them. Dropdowns will automatically adjust their position to fit on the screen.
1<x-nav id="nav-08" horizontal> 2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 4 <x-nav.item icon="folder--outline" current> 5 Projects 6 7 <x-slot:dropdown> 8 <x-nav.item icon="folder--outline">DataForms.io</x-nav.item> 9 <x-nav.item icon="user-plus--outline">Hirely</x-nav.item> 10 <x-nav.item icon="clipboard-document--outline">Basic-Components</x-nav.item> 11 <hr>12 <x-nav.item icon="plus--mini text-primary-400" class="text-primary-400 fw-medium">Create Project</x-nav.item> 13 </x-slot:dropdown> 14 </x-nav.item> 15 16 <x-nav.item icon="users--outline">Teams</x-nav.item>17 <x-nav.item icon="document--outline">Tasks</x-nav.item>18</x-nav>Dropdown Nesting
You can nest dropdowns by using the dropdown slot within a dropdown item.
You can control the position of a dropdown by using the position attribute on the dropdown slot. Available positions are left-start, left-end, right-start, right-end, top-start, top-end, bottom-start, and bottom-end.
1<x-nav id="nav-09" horizontal> 2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 <x-nav.item icon="folder--outline" current> 4 Projects 5 6 <x-slot:dropdown open> 7 <x-nav.item icon="folder--outline">DataForms.io</x-nav.item> 8 <x-nav.item icon="user-plus--outline"> 9 Hirely 10 <x-slot:dropdown position="right-start"> 11 <x-nav.item icon="clipboard-document--outline">Details</x-nav.item> 12 <x-nav.item icon="users--outline">Members</x-nav.item> 13 <x-nav.item icon="check--outline">Tasks</x-nav.item> 14 </x-slot:dropdown> 15 </x-nav.item> 16 <x-nav.item icon="clipboard-document--outline">Basic-Components</x-nav.item> 17 </x-slot:dropdown> 18 </x-nav.item>19 <x-nav.item icon="users--outline">Teams</x-nav.item>20 <x-nav.item icon="document--outline">Tasks</x-nav.item>21</x-nav>Mixing Dropdowns and Submenus
You can mix dropdowns and submenus to create complex navigation structures.
1<x-nav id="nav-10"> 2 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 3 4 <x-nav.item icon="folder--outline" current> 5 Projects 6 7 <x-slot:submenu open> 8 <x-nav.item>DataForms.io</x-nav.item> 9 <x-nav.item>10 Hirely11 <x-slot:dropdown position="right-start">12 <x-nav.item>Item</x-nav.item>13 <x-nav.item>14 Dropdown15 <x-slot:dropdown position="right-start">16 <x-nav.item>Submenu 1</x-nav.item>17 <x-nav.item>Submenu 2</x-nav.item>18 <x-nav.item>Submenu 3</x-nav.item>19 </x-slot:dropdown>20 </x-nav.item>21 <x-nav.item>22 Submenu23 <x-slot:submenu>24 <x-nav.item>Submenu 1</x-nav.item>25 <x-nav.item>26 Submenu 227 <x-slot:dropdown position="right-start">28 <x-nav.item>Submenu 1</x-nav.item>29 <x-nav.item>Submenu 2</x-nav.item>30 <x-nav.item>Submenu 3</x-nav.item>31 </x-slot:dropdown>32 </x-nav.item>33 <x-nav.item>Submenu 3</x-nav.item>34 </x-slot:submenu>35 </x-nav.item>36 </x-slot:dropdown>37 </x-nav.item>38 <x-nav.item>Basic-Components</x-nav.item>39 </x-slot:submenu>40 </x-nav.item>41 42 <x-nav.item icon="users--outline">Teams</x-nav.item>43 <x-nav.item icon="document--outline">Tasks</x-nav.item>44</x-nav>Navbar groups
You can group nav-items by using the <x-nav.group> component.
1<x-nav id="nav-group"> 2 <x-nav.group label="Group One"> 3 <x-nav.item icon="home--outline">Dashboard</x-nav.item> 4 <x-nav.item icon="folder--outline" current>Projects</x-nav.item> 5 </x-nav.group> 6 <x-nav.group label="Group Two"> 7 <x-nav.item icon="users--outline">Teams</x-nav.item> 8 <x-nav.item icon="document--outline">Tasks</x-nav.item> 9 </x-nav.group>10</x-nav>Responsive mobile menu
Navbars will automatically switch to a mobile menu on screens, which are smaller than 992px. In order for the mobile menu to work, you have to add a toggle button to your page. The button can be placed anywhere on your page and does not have to be within the navbar.
You then have to add the identifier (e. G. #id or .class) of the toggle button to the <x-nav> component by using the mobile-toggle attribute.
1<div class="my-header d-flex gap-1">2 <x-button id="my-mobile-toggle" icon="bars-3--mini" />3 4 <x-nav id="nav-responsive" mobile-toggle="#my-mobile-toggle">5 <x-nav.item icon="home--outline">Dashboard</x-nav.item>6 {{-- ... --}}7 </x-nav>8</div>Responsive menu customization
You can customize the mobile menu by using the <x-slot:header> and <x-slot:footer> slots. These will only show on the mobile menu, so you can add more informations like a logo, a title or a footer to the mobile menu.
1<x-nav id="nav-mobile-custom"> 2 <x-slot:header> 3 <h3 class="m-0">My Mobile Nav Header</h3> 4 </x-slot:header> 5 6 <x-slot:footer> 7 <p class="m-0">My Mobile Nav Footer</p> 8 </x-slot:footer> 9 10 <x-nav.item icon="home--outline">Dashboard</x-nav.item>11 12 {{-- ... --}}13 14</x-nav>