Docs Menu

Nav Bars

Nav Bars have the following properties which are optional:

Property Required? Type Options Description
bg no string
  • null (default)
  • transparent
  • warning
  • success
  • info
  • notice
 Background color of the Nav Bar.
classes no string Additional classes that are applied to the Nav Bar component.
fullWidth no bool
  • true (default)
  • false
 If the Nav Bar is Full Width or not (pass in a custom width via the class option)
slot:logo no string Icon / Logo to be displayed at on the left side of the Nav Bar.
id no string value of the id attribute for the Nav Bar.
slot:mobileFooter no string Content to be displayed on the mobile version of the Nav Bar at the bottom.
slot:mobileMenuIcon no string Icon that represents the hide/show button when on mobile devices.
slot:rightMenuButtons no string Buttons to display on the right side of the Nav Bar.

Basic Examples
Basic Nav Bar example. 

            
 1<x-fcui-nav-bar bg="warning">
 2 
 3    <x-slot:logo>
 4        <a class="text-4xl" href="#">
 5            <i class="fa-solid fa-house"></i>
 6        </a>
 7    </x-slot:logo>
 8 
 9    <x-slot:mobileMenuIcon>
10        <i class="fa-solid fa-bars"></i>
11    </x-slot:mobileMenuIcon>
12 
13    <x-slot:links>
14        <li>
15            <x-fcui-nav-link>Home</x-fcui-nav-link>
16        </li>
17 
18        <li>
19            <x-fcui-nav-link>About Us</x-fcui-nav-link>
20        </li>
21 
22        <li>
23            <x-fcui-nav-link>Our Blog</x-fcui-nav-link>
24        </li>
25 
26        <li>
27            <x-fcui-nav-link>Contact Us</x-fcui-nav-link>
28        </li>
29    </x-slot:links>
30 
31</x-fcui-nav-bar>