Navbar

Responsive navbar component with mobile menu support and customizable navigation items.

Basic Example


<.navbar brand="MyApp">
  <:item href="/">Home</:item>
  <:item href="/about">About</:item>
  <:item href="/contact">Contact</:item>
</.navbar>

With Active State


<.navbar brand="MyApp">
  <:item href="/" active={true}>Home</:item>
  <:item href="/about" active={false}>About</:item>
  <:item href="/contact" active={false}>Contact</:item>
</.navbar>

With Actions Slot


<.navbar brand="MyApp">
  <:item href="/">Home</:item>
  <:item href="/about">About</:item>
  <:actions>
    <.button variant={:primary} size={:sm}>Sign In</.button>
  </:actions>
</.navbar>

Props

Prop	Type	Default	Description
brand	string	"Brand"	Brand name displayed in navbar
class	string	""	Additional CSS classes
item (slot)	slot	-	Navigation items. Each item accepts: `href` - Navigation path (required) `active` - Boolean to mark active item (optional)
actions (slot)	slot	-	Content displayed on the right side of the navbar (e.g., buttons, user menu)

Mobile Menu

The navbar automatically includes a mobile menu toggle button. To handle the mobile menu toggle, add a LiveView event handler:


def handle_event("toggle-mobile-menu", _params, socket) do
  {:noreply, assign(socket, :mobile_menu_open, !socket.assigns[:mobile_menu_open])}
end

Note: You'll need to add JavaScript or LiveView logic to show/hide the mobile menu based on the state.