Kaiko UI Kaiko UI

Menu

Stable

Flexible menu component for navigation, sidebars, and dropdown content with support for icons, badges, submenus, and various styling options.

API Reference

c-menu

Attribute Description Type Default
size Controls the size of menu items string "md"
direction Sets menu layout direction string "vertical"
spacing Controls vertical spacing between menu items string "1"
bordered Adds a border and rounded corners around the entire menu boolean False

Nested Components

Component Description Type Default
c-menu.item Individual navigation link item with support for active, disabled, and focus states slot —
c-menu.button Action item — like c-menu.item but renders a <button> instead of an anchor slot —
c-menu.submenu Collapsible submenu container with title, chevron, and optional open state control slot —
c-menu.title Section title for grouping menu items slot —
c-menu.separator Prominent visual separator between menu sections void —
c-menu.divider Subtle horizontal divider line between menu sections void —

c-menu.item / c-menu.button Attributes

Attribute Description Type Default
href Makes the item a clickable link string ""
active Highlights the item as currently selected boolean False
disabled Disables interaction with the item boolean False
focus Applies focus styling to the item boolean False
target Forwarded to the underlying <a> target attribute string "_self"

c-menu.submenu Attributes

Attribute Description Type Default
title Text for the submenu trigger string ""
open Submenus are open by default. Pass open="false" to close. Useful with Django conditional logic. string "true"
collapsible Whether the submenu can be collapsed/expanded by the user boolean True
chevron_side Side placement of the expand/collapse chevron icon string "left"
href Makes non-collapsible submenus clickable string ""

size

xs sm md lg xl

direction

vertical horizontal

spacing

0 1 2 4

Accessibility

Semantic list: c-menu renders a DaisyUI <ul> list so screen readers announce it as a list with a count of items.

Active state: active on c-menu.item should reflect the current page. Use in combination with aria-current="page" on the anchor for full accessibility (add it via passthrough).

Submenus: collapsible submenus use the CSS details/summary pattern, which is natively keyboard accessible (Tab to focus, Enter/Space to expand/collapse).

Examples

Usage 


<c-menu class="bg-base-200 rounded-box">
  <c-menu.item href="/dashboard">Dashboard</c-menu.item>
  <c-menu.item href="/analytics" active>Analytics</c-menu.item>
</c-menu>

Basic Vertical Menu 

<c-menu class="bg-base-200 rounded-box">
  <c-menu.item href="#dashboard">
    <c-icon name="layout-dashboard" />
    Dashboard
  </c-menu.item>
  <c-menu.item href="#analytics" active>
    <c-icon name="bar-chart-2" />
    Audit
    <span class="badge badge-sm badge-success">Live</span>
  </c-menu.item>
  <c-menu.item disabled>
    <c-icon name="shield-check" />
    Admin Panel
  </c-menu.item>
</c-menu>

Horizontal Menu 

<c-menu direction="horizontal" class="bg-base-200 rounded-box">
  <c-menu.item href="#dashboard">Dashboard</c-menu.item>
  <c-menu.item href="#analytics" active>Audit</c-menu.item>
  <c-menu.item href="#settings" focus>Settings</c-menu.item>
</c-menu>

Menu with Sections 

<c-menu class="bg-base-200 rounded-box">
  <c-menu.title>Navigation</c-menu.title>
  <c-menu.item href="#home"><c-icon name="house" />Home</c-menu.item>
  <c-menu.item href="#dashboard"><c-icon name="layout-dashboard" />Dashboard</c-menu.item>

  <c-menu.separator />

  <c-menu.title>Account</c-menu.title>
  <c-menu.item href="#profile"><c-icon name="user" />Profile</c-menu.item>
  <c-menu.item href="#billing"><c-icon name="credit-card" />Billing</c-menu.item>
</c-menu>

Collapsible Submenus 

<c-menu class="bg-base-200 rounded-box">
  <c-menu.submenu title="Products">
    <c-menu.item href="#web-apps">Web Applications</c-menu.item>
    <c-menu.submenu title="Mobile Apps" open="false">
      <c-menu.item href="#ios-apps">iOS Apps</c-menu.item>
      <c-menu.item href="#android-apps">Android Apps</c-menu.item>
    </c-menu.submenu>
  </c-menu.submenu>
</c-menu>

Buttons and Divider 

<c-menu bordered class="bg-base-100 shadow-lg">
  <c-menu.button>Add section</c-menu.button>
  <c-menu.button>Add text block</c-menu.button>

  <c-menu.divider />

  <c-menu.button>Delete</c-menu.button>
</c-menu>

Conditional Submenu Open State 

<!-- Submenus open by default. Use open="false" to close conditionally. -->
<c-menu.submenu title="Team"
  open="{% if current_section != 'team' %}false{% else %}true{% endif %}">
  <c-menu.item href="#members">Team Members</c-menu.item>
  <c-menu.item href="#roles">Roles & Permissions</c-menu.item>
</c-menu.submenu>

Sizes 

<c-menu size="xs" class="bg-base-200 rounded-box">...</c-menu>
<c-menu size="md" class="bg-base-200 rounded-box">...</c-menu>
<c-menu size="lg" class="bg-base-200 rounded-box">...</c-menu>