Kaiko UI Kaiko UI

Navigation Menu

New

Horizontal navigation bar component built on DaisyUI's navbar and menu patterns. Supports link items with active state, icons, and background variants.

API Reference

c-navigation-menu

Attribute Description Type Default
bg Background color of the navigation bar. Use primary or neutral for branded headers — the component automatically applies the matching content color. string ""
shadow Adds a drop shadow beneath the bar boolean False

c-navigation-menu.item

Attribute Description Type Default
href Destination URL — causes the item to render as an <a> tag string ""
active Highlights the item as the current page and adds aria-current="page" boolean False
disabled Disables interaction and applies muted styling boolean False

bg

base-100 base-200 primary neutral

Accessibility

Nav landmark: the component renders a <nav> element, which is exposed as a navigation landmark to assistive technologies. If multiple nav elements are present on a page, add a distinct aria-label via the class passthrough.

Current page: when active="True" is set on an item, aria-current="page" is added automatically so screen readers announce the currently active link.

Disabled items: disabled items have pointer-events: none applied via CSS. They are not removed from the tab order by default — if needed, add tabindex="-1" via the attrs passthrough to exclude them from keyboard navigation.

Examples

Usage 


<c-navigation-menu bg="base-100" shadow="True">
  <c-navigation-menu.item href="#home">Home</c-navigation-menu.item>
  <c-navigation-menu.item href="#products" active="True">Products</c-navigation-menu.item>
  <c-navigation-menu.item href="#contact">Contact</c-navigation-menu.item>
</c-navigation-menu>

Basic Horizontal Nav 

<c-navigation-menu bg="base-100" shadow="True">
  <c-navigation-menu.item href="#home">Home</c-navigation-menu.item>
  <c-navigation-menu.item href="#products" active="True">Products</c-navigation-menu.item>
  <c-navigation-menu.item href="#blog">Blog</c-navigation-menu.item>
  <c-navigation-menu.item href="#contact">Contact</c-navigation-menu.item>
</c-navigation-menu>

Nav Items with Icons 

<c-navigation-menu bg="base-100" shadow="True">
  <c-navigation-menu.item href="#dashboard" active="True">
    <c-icon name="layout-dashboard" />
    Dashboard
  </c-navigation-menu.item>
  <c-navigation-menu.item href="#analytics">
    <c-icon name="bar-chart-2" />
    Analytics
  </c-navigation-menu.item>
</c-navigation-menu>

Full Navbar Layout

Kaiko
Sign up 
<div class="navbar bg-base-100 shadow">
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl font-bold" href="#">Kaiko</a>
  </div>
  <div class="navbar-center">
    <c-navigation-menu>
      <c-navigation-menu.item href="#home" active="True">Home</c-navigation-menu.item>
      <c-navigation-menu.item href="#features">Features</c-navigation-menu.item>
    </c-navigation-menu>
  </div>
  <div class="navbar-end">
    <a class="btn btn-primary btn-sm" href="#">Sign up</a>
  </div>
</div>

Background Variants 

<c-navigation-menu bg="base-200">...</c-navigation-menu>
<c-navigation-menu bg="primary">...</c-navigation-menu>
<c-navigation-menu bg="neutral">...</c-navigation-menu>

Disabled Item 

<c-navigation-menu bg="base-100">
  <c-navigation-menu.item href="#home" active="True">Home</c-navigation-menu.item>
  <c-navigation-menu.item href="#features">Features</c-navigation-menu.item>
  <c-navigation-menu.item href="#admin" disabled="True">Admin</c-navigation-menu.item>
</c-navigation-menu>