defmodule PyrauiWeb.DocsLive.NavbarDocs do use PyrauiWeb, :html def render(assigns) do ~H"""

Navbar

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

Basic Example

<:item href="/">Home <:item href="/about">About <:item href="/contact">Contact 

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

With Active State

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

    <.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

<:item href="/">Home <:item href="/about">About <:actions> Sign In 

    <.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.

""" end end