View Source Lume.Components.Navbar (lume v0.2.0)

A flexible navigation bar component for application headers.

Features

  • Responsive design with mobile menu toggle
  • Customizable heading
  • Flexible right-side content through slots
  • Mobile-friendly with sidebar integration
  • Dark mode support

Examples

# Basic navbar with heading
<.navbar>
  Dashboard
</.navbar>

# With notifications icon and user profile
<.navbar>
  Settings
  <:right_content>
    <div class="flex items-center gap-x-4">
      <.icon_button icon="hero-bell" />
      <.user_profile user={@current_user} />
    </div>
  </:right_content>
</.navbar>

# Simple navbar with custom content
<.navbar>
  Projects
  <:right_content>
    <.button>New Project</.button>
  </:right_content>
</.navbar>

Summary

Functions

Renders a navigation bar component.

Functions