KAUI CSS KitComponent Showcase
Interactive overflow lab

Test every submenu direction

Open Edge test, then move through More levels and Level 3. Resize the browser or scroll near the bottom of the page to see the menu automatically choose the side with the most room.

Flip up Flip left Unlimited depth
1Desktop: open the right-most Edge test menu to trigger left alignment when needed.
2Scroll close to the bottom, open a submenu, and it flips upward when below space is smaller.
3Mobile: tap the hamburger, then tap each parent item to expand vertically.

Navbar guide & code samples

Build a responsive Navbar from four layers: a brand, a toggle button, a navigation menu, and optional actions. Use k-navbar--expand-lg to switch from the mobile drawer to the desktop layout at the large breakpoint.

1. Basic structure

Keep the toggle's aria-controls equal to the menu id. The runtime synchronizes aria-expanded when the drawer opens.

2. Nested menus

Use a button for every parent item, add aria-haspopup="true", and nest another .k-navbar__submenu for unlimited levels.

3. Smart overflow

On desktop, open menus are measured against the viewport. They receive .is-dropup when the bottom is tight and .is-dropstart when the right edge is tight.

Recommended modifiers: k-navbar--sticky, k-navbar--shadow, k-navbar--dark, k-navbar--compact, k-navbar--centered, and k-navbar--borderless. On mobile, parent buttons expand vertically; Escape and outside click close the open menus.

Code sample: Multi-level Submenu (Menu con đa cấp lồng nhau)

<header class="k-navbar k-navbar--expand-lg k-navbar--sticky k-navbar--shadow">
  <div class="k-navbar__container">
    <a class="k-navbar__brand" href="#">Brand</a>
    <button class="k-navbar__toggle" type="button" aria-controls="primary-nav" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
    <nav class="k-navbar__menu" id="primary-nav">
      <ul class="k-navbar__nav">
        <li><a class="k-navbar__link is-active" href="#">Home</a></li>

        <!-- Menu con Level 1 (mở trên/dưới) -->
        <li class="k-navbar__item--has-children">
          <button class="k-navbar__link" type="button" aria-haspopup="true" aria-expanded="false">
            Products <i data-kaui-icon="chevron-down"></i>
          </button>
          <ul class="k-navbar__submenu">
            <li><a class="k-navbar__link" href="#overview">Overview</a></li>

            <!-- Menu con Level 2 (mở ngang trái/phải, top căn phẳng) -->
            <li class="k-navbar__item--has-children">
              <button class="k-navbar__link" type="button" aria-haspopup="true" aria-expanded="false">
                Analytics <i data-kaui-icon="chevron-right"></i>
              </button>
              <ul class="k-navbar__submenu">
                <li><a class="k-navbar__link" href="#reports">Realtime Reports</a></li>

                <!-- Menu con Level 3 (tiếp tục mở theo 1 chiều gần nhất) -->
                <li class="k-navbar__item--has-children">
                  <button class="k-navbar__link" type="button" aria-haspopup="true" aria-expanded="false">
                    Deep Settings <i data-kaui-icon="chevron-right"></i>
                  </button>
                  <ul class="k-navbar__submenu">
                    <li><a class="k-navbar__link" href="#security">Security</a></li>
                    <li><a class="k-navbar__link" href="#audit">Audit logs</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a class="k-navbar__link" href="#pricing">Pricing</a></li>
      </ul>
      <div class="k-navbar__actions">
        <button class="k-btn k-btn--sm k-btn--primary">Sign in</button>
      </div>
    </nav>
  </div>
</header>