Sidebar

Stable

Composable sidebar component system for building navigation sidebars with flexible layouts, collapsible modes, and responsive behavior. Inspired by shadcn-ui, adapted for Django/Alpine.js/DaisyUI.

API Reference

c-sidebar

Attribute	Description	Type	Default
`z_index`	Z-index for stacking order	string	`"30"`
`fixed`	Positions the sidebar with `fixed` instead of the default relative layout	boolean	`False`
`allow_overflow`	When `True`, allows sidebar content to overflow (e.g. for nested dropdowns)	boolean	`True`
`class`	Additional CSS classes. Use `::class` for Alpine.js bindings (e.g. `::class="{'w-16': sidebarCollapsed}"`)	string	`""`

Nested Components

Component	File Location	Description
`c-sidebar.header`	`sidebar/header.html`	Header section for logo, branding, or title
`c-sidebar.content`	`sidebar/content.html`	Scrollable content area for menu groups
`c-sidebar.footer`	`sidebar/footer.html`	Footer section for user profile or settings
`c-sidebar.group`	`sidebar/group.html`	Logical grouping container for menu items
`c-sidebar.toggle`	`sidebar/toggle.html`	Toggle button for collapse/expand

c-sidebar.group Attributes

Attribute	Description	Type	Default
`scrollable`	Enables vertical scrolling and viewport-bounded max height on the group	boolean	`False`
`class`	Additional CSS classes applied to the group wrapper	string	`""`

c-sidebar.toggle Attributes

Attribute	Description	Type	Default
`position`	Position style of the toggle button	string	`"edge"`

toggle position

edge header

Landmark region: render the sidebar as <aside aria-label="..."> to provide a meaningful navigation landmark. Use distinct labels for primary and secondary sidebars.

Alpine.js state: the component relies on sidebarStatus and sidebarCollapsed from the root Alpine.js context. Use ::class to bind dynamic widths: ::class="{'w-16': sidebarCollapsed, 'w-64': !sidebarCollapsed}".

Toggle button: use @click="sidebarStatus = sidebarStatus === 'collapsed' ? 'expanded' : 'collapsed'" on the toggle. Ensure the button has a meaningful accessible label (e.g. aria-label="Collapse sidebar") that updates based on state.

Secondary sidebar: for secondary sidebars, use :fixed="False" and x-init="hasSecondarySidebar = true" to enable the layout adjustments in with_nav.html.

Examples

Usage

<c-sidebar ::class="{'w-16': sidebarCollapsed, 'w-64': !sidebarCollapsed}" aria-label="Main navigation">
  <c-sidebar.header>...</c-sidebar.header>
  <c-sidebar.content>
    <c-sidebar.group :scrollable=True>...</c-sidebar.group>
  </c-sidebar.content>
  <c-sidebar.footer>...</c-sidebar.footer>
</c-sidebar>

Secondary Sidebar (Module-Specific Navigation)

A secondary sidebar for module-specific navigation. This example demonstrates the pattern used in vessel pages with dynamic positioning based on the main sidebar's collapsed state.

MV Atlantic Voyager

Content area — toggle the main sidebar with the chevron button to see dynamic layout adjustments.

Health Status

Good

85% Overall

Last Inspection

2025-10-10

<c-sidebar
  x-init="hasSecondarySidebar = true"
  :fixed="False"
  aria-label="Secondary navigation">

  <c-sidebar.content>
    <c-sidebar.group>
      <c-menu class="w-full">
        <li class="rounded">
          <a href="#item" class="flex items-center gap-4 bg-primary/10 text-primary font-semibold">
            <c-icon name="anchor" size="18" />
            <span>MV Atlantic Voyager</span>
          </a>
        </li>
      </c-menu>
    </c-sidebar.group>
    <c-sidebar.group :scrollable=True>
      <c-menu class="w-full">
        <li class="rounded">
          <a href="#item" class="flex items-center gap-4">
            <c-icon name="chevron-right" size="18" />
            <span>Menu Item</span>
          </a>
        </li>
      </c-menu>
    </c-sidebar.group>
  </c-sidebar.content>

  <c-sidebar.footer>
    <div class="pt-4 border-t border-base-200">
      <button class="btn btn-sm w-full">Action</button>
    </div>
  </c-sidebar.footer>
</c-sidebar>