UNI is still under development — Please check back at the end of March
Skip to content

Menus

Navigable list items for settings and drill-down navigation.

Menus

Basic menu

Use for settings pages and hierarchical navigation.

<nav class="menu">
  <a href="/settings" data-icon="settings">
    <strong>Settings</strong>
    <small>Configure your preferences</small>
  </a>
  <a href="/account" data-icon="person">
    <strong>Account</strong>
    <small>Manage your profile</small>
  </a>
</nav>

Static item

Non-interactive status display.

llama.cpp Connected – llama3.2 loaded 
<div class="menu">
  <div data-icon="memory">
    <strong>llama.cpp</strong>
    <small>Connected</small>
  </div>
</div>

Button item

For actions that submit data (logout, delete, etc.).

<nav class="menu">
  <form method="POST" action="/logout">
    <button type="submit" data-icon="logout">
      <strong>Log out</strong>
      <small>End your session</small>
    </button>
  </form>
</nav>

Badge

To draw attention to something actionable.

<nav class="menu">
  <a href="/updates" data-icon="update">
    <strong>Updates</strong>
    <small>Check for new versions</small>
    <span class="badge">3 available</span>
  </a>
</nav>

Usage

Only use badges in menu items for something actionable. To display regular status information, use the <small> element instead.

Staggered animation

Make items slide in sequentially by adding .stagger and --stagger-index. Use for dynamically populated items like user-provided plugins.

<nav class="menu">
  {% for item in items %}
  <a
    href="/item/{{ item.id }}"
    data-icon="extension"
    class="stagger"
    style="--stagger-index: {{ loop.index0 }}"
  >
    <strong>{{ item.name }}</strong>
    <small>{{ item.description }}</small>
  </a>
  {% endfor %}
</nav>