AvenUI.Components.Sidebar (AvenUI v1.0.0)

Copy Markdown View Source

Responsive sidebar navigation component for admin dashboards and applications.

Features

  • Collapsible navigation
  • Mobile responsive with overlay
  • Multiple layout modes
  • Active state tracking
  • Nested navigation support
  • Badge/indicator support

Examples

<%!-- Basic sidebar --%>
<.sidebar>
  <:header>
    <.sidebar_logo>MyApp</.sidebar_logo>
  </:header>

  <:nav>
    <.sidebar_item href="/dashboard" active={@current_path == "/dashboard"}>
      Dashboard
    </.sidebar_item>
    <.sidebar_item href="/users">
      Users
    </.sidebar_item>
  </:nav>

  <:footer>
    <.sidebar_user user={@current_user} />
  </:footer>
</.sidebar>

<%!-- Collapsible sidebar --%>
<.sidebar collapsible collapsed={@collapsed}>
  <:nav>
    <.sidebar_item href="/settings">Settings</.sidebar_item>
  </:nav>
</.sidebar>

Summary

Functions

sidebar(assigns)
sidebar_divider(assigns)

Sidebar section divider.

sidebar_item(assigns)

Sidebar navigation item.

sidebar_logo(assigns)

Sidebar logo/title component.

sidebar_user(assigns)

Sidebar user section.

Functions

sidebar(assigns)

Attributes

  • id (:string) (required)
  • collapsible (:boolean) - Defaults to false.
  • collapsed (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • header - Logo and branding section.
  • nav (required) - Navigation items.
  • footer - User info and additional actions.