Winnie CSS
  1. Primitives
  2. navigation

navigation

Provides users the ability to navigate an application. 

<ul data-component="navigation">
  <li>
    <a data-component="navigation-item">
      <span data-slot="label">Home</span>
    </a>
  </li>
  <li>
    <a data-component="navigation-item">
      <span data-slot="label">Dishes</span>
    </a>
  </li>
  <li>
    <a data-component="navigation-item">
      <span data-slot="label">Drinks</span>
    </a>
  </li>
  <li>
    <a data-component="navigation-item">
      <span data-slot="label">Menus</span>
    </a>
  </li>
</ul>

Import

Import just the navigation styles.

@import "@winnie-ui/css/spatial/navigation";
@import "@winnie-ui/css/visual/navigation";

Anatomy

Attach the appropriate data attributes in the structure below.

<ul data-component="navigation">
  <li>
    <a data-component="navigation-item">
      <i data-slot="icon" />
      <span data-slot="label" />
    </a>
  </li>
  <ul data-component="navigation-group">
    <li>
      <a data-component="navigation-item">
        <i data-slot="icon" />
        <span data-slot="label" />
        <button data-slot="action" />
      </a>
    </li>
  </ul>
  <li>
    <div data-component="navigation-item">
      <i data-slot="icon" />
      <span data-slot="label" />
      <button data-slot="action" />
    </div>
    <ul data-component="navigation-group">
      <li>
        <a data-component="navigation-item">
          <i data-slot="icon" />
          <span data-slot="label" />
          <button data-slot="action" />
        </a>
      </li>
    </ul>
  </li>
</ul>

Examples

Radius

Use the data-radius attribute to change the radius.

 
<ul data-component="navigation">
  <li data-component="navigation-item" data-radius="<radius>">
    <span data-slot="label">Home</span>
  </li>
  ...
</ul>

Icon

Add an icon with the icon slot attribute as a child of the navigation item.

 
<ul data-component="navigation">
  <li>
    <a data-component="navigation-item" data-radius="<radius>">
      <i class="home" data-slot="icon"></i>
      <span data-slot="label">Home</span>
    </a>
  </li>
  ...
</ul>

Action

Add an action with the action slot attribute as a child of the navigation item.

 
<ul data-component="navigation">
  <li>
    <a data-component="navigation-item">
      <i class="location" data-slot="icon"></i>
      <span data-slot="label">Locations</span>
      <button
        data-component="button"
        data-size="sm"
        data-variant="4"
        data-slot="action"
        data-accent-color="grey"
      >
        <i class="dot-horizontal" data-slot="icon"></i>
      </button>
    </a>
  </li>
  ...
</ul>

Group

Add a group with the navigation-group component.

 
<ul data-component="navigation">
  ...
  <li>
    <a data-component="navigation-item">
      <i class="store" data-slot="icon"></i>
      <span data-slot="label">
        Locations
        <i class="triangle-down" aria-hidden="true"></i>
      </span>
      <button
        data-component="button"
        data-size="sm"
        data-variant="4"
        data-slot="action"
        data-accent-color="grey"
      >
        <i class="dot-horizontal" data-slot="icon"></i>
      </button>
    </a>
    <ul data-component="navigation-group">
      <li>
        <a data-component="navigation-item">
          <span data-slot="label">Cambridge</span>
        </a>
      </li>
      <li>
        <a data-component="navigation-item">
          <span data-slot="label">Kitchener</span>
        </a>
      </li>
      <li>
        <a data-component="navigation-item">
          <span data-slot="label">Waterloo</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Disabled

Use the data-disabled or aria-disabled attributes to mark a navigation item as disabled.

 
<ul data-component="navigation">
  ...
  <li>
    <a data-component="navigation-item" data-disabled="true">
      <i class="cocktail" data-slot="icon"></i>
      <span data-slot="label">Drinks</span>
    </a>
  </li>
  ...
</ul>

Current

Use the data-current or aria-current attributes to identify the current pages’ navigation item.

 
<ul data-component="navigation">
  ...
  <li>
    <a data-component="navigation-item" data-current="true">
      <i class="cocktail" data-slot="icon"></i>
      <span data-slot="label">Drinks</span>
    </a>
  </li>
  ...
</ul>

Reference

navigation-item

Groups all of the parts of the item together.

AttributeValue
data-radius"none" | "sm" | "md" | "lg" | "round"
data-disabledboolean
data-currentboolean
ModifierDescription
hoveredWhen the navigation item is hovered with a mouse
pressedWhen the navigation item is pressed with a mouse or keyboard
disabledWhen the navigation item prevents user interaction
currentWhen the navigation item represents the current page in the application
Variable
--wui-navigation-item-background-<?modifier>
--wui-navigation-item-border-<?modifier>
--wui-navigation-item-color-<?modifier>
--wui-navigation-item-font-weight