Nav

Overview

Basic Navigation

<nav class="nav">
  <button class="nav__item" type="button">Click me</button>
  <button class="nav__item" type="button" data-active="true">Click me</button>
  <a class="nav__item" href="/">Click me</a>
</nav>

Stacked Navigation

<nav class="nav nav--stacked">
  <button class="nav__item" type="button">Click me</button>
  <button class="nav__item" type="button" data-active="true">Click me</button>
  <a class="nav__item" href="/">Click me</a>
</nav>

Tabbed Navigation

<nav class="nav nav--tabs">
  <button class="nav__item" type="button">Click me</button>
  <button class="nav__item" type="button" data-active="true">Click me</button>
  <a class="nav__item" href="/">Click me</a>
</nav>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/nav.css

• Directorystyle

  • Directorymodules

    • nav.css

Stylesheet

@layer cwf-modules {
  .nav {
    display: var(--nav-display, flex);
    flex-flow: var(--nav-flex-flow, wrap row);
    align-items: var(--nav-align-items, center);
    justify-content: var(--nav-justify-content, flex-start);
    position: var(--nav-position, relative);
    margin: var(--nav-margin-top, 0) var(--nav-margin-right, 0)
      var(--nav-margin-bottom, var(--size-3)) var(--nav-margin-left, 0);
    padding: var(--nav-padding, 0);
    list-style: var(--nav-list-style, none);
    gap: var(--nav-gap, 0);
    border-width: var(--nav-border-width, 0);
    border-style: var(--nav-border-style, solid);
    border-color: var(--nav-border-color, transparent);
    color: var(--nav-color, inherit);

    .nav__item {
      align-items: var(--nav-item-align-items, center);
      background: var(--nav-item-background, transparent);
      border-color: var(--nav-item-border-color, transparent);
      border-radius: var(--nav-item-border-radius, 0);
      border-style: var(--nav-item-border-style, solid);
      border-width: var(--nav-item-border-width, 0);
      box-shadow: var(--nav-item-box-shadow, none);
      color: var(--nav-item-color, inherit);
      cursor: var(--nav-item-cursor, pointer);
      display: var(--nav-item-display, inline-flex);
      font-weight: var(--nav-item-font-weight, 400);
      gap: var(--nav-item-gap, var(--size-3));
      justify-content: var(--nav-item-justify-content, center);
      line-height: var(--nav-item-line-height, 1);
      margin: var(--nav-item-margin, 0);
      outline: var(--nav-item-outline, 0);
      padding: var(--nav-item-padding-top, var(--size-3))
        var(--nav-item-padding-right, var(--size-5))
        var(--nav-item-padding-bottom, var(--size-3))
        var(--nav-item-padding-left, var(--size-5));
      text-align: var(--nav-item-text-align, center);
      text-decoration: var(--nav-item-text-decoration, none);
      user-select: var(--nav-item-user-select, none);
      vertical-align: var(--nav-item-vertical-align, middle);
      white-space: var(--nav-item-white-space, nowrap);
      width: var(--nav-item-width, auto);

      &:hover {
        background: var(--nav-item-hover-background, WhiteSmoke);
        border-color: var(--nav-item-hover-border-color, transparent);
        color: var(--nav-item-hover-color, inherit);
        text-decoration: var(--nav-item-hover-text-decoration, none);
      }

      &:focus-visible,
      &:focus {
        background: var(--nav-item-focus-background, WhiteSmoke);
        border-color: var(--nav-item-focus-border-color, transparent);
        color: var(--nav-item-focus-color, inherit);
        text-decoration: var(--nav-item-focus-text-decoration, none);
      }

      &:active {
        background: var(--nav-item-active-background, WhiteSmoke);
        border-color: var(--nav-item-active-border-color, transparent);
        color: var(--nav-item-active-color, inherit);
        text-decoration: var(--nav-item-active-text-decoration, none);
      }

      &[aria-current="page"] {
        background: var(--nav-item-current-background, WhiteSmoke);
        border-color: var(--nav-item-current-border-color, transparent);
        color: var(--nav-item-current-color, inherit);
        text-decoration: var(--nav-item-current-text-decoration, none);
      }

      &:disabled {
        background: var(--nav-item-disabled-background, transparent);
        border-color: var(--nav-item-disabled-border-color, transparent);
        color: var(--nav-item-disabled-color, inherit);
        text-decoration: var(--nav-item-disabled-text-decoration, none);
        pointer-events: var(--nav-item-disabled-pointer-events, none);
        opacity: var(--nav-item-disabled-opacity, 0.5);
      }
    }

    &.nav--stacked {
      align-items: var(--nav-align-items, stretch);
      flex-flow: var(--nav-flex-flow, wrap column);

      .nav__item {
        justify-content: var(--nav-item-justify-content, flex-start);
        width: var(--nav-item-width, 100%);
      }
    }

    &.nav--tabs {
      &:not(:empty) {
        border-color: var(--nav-border-color, LightGrey);
        border-style: var(--nav-border-style, solid);
        border-width: var(--nav-border-width, 0 0 1px);
        gap: var(--nav-gap, var(--size-3));
        padding: var(--nav-padding, 0 var(--size-3));
      }

      .nav__item {
        border-color: var(--nav-item-border-color, inherit);
        border-radius: var(
          --nav-item-border-radius,
          var(--size-2) var(--size-2) 0 0
        );
        border-width: var(--nav-item-border-width, 1px);
        margin: var(--nav-item-margin, 0 0 -1px);

        &:hover {
          background: var(--nav-item-hover-background, WhiteSmoke);
          border-color: var(--nav-item-active-border-color, LightGrey);
          color: var(--nav-item-hover-color, inherit);
          text-decoration: var(--nav-item-hover-text-decoration, none);
        }

        &:focus-visible,
        &:focus {
          background: var(--nav-item-focus-background, WhiteSmoke);
          border-color: var(--nav-item-active-border-color, LightGrey);
          color: var(--nav-item-focus-color, inherit);
          text-decoration: var(--nav-item-focus-text-decoration, none);
        }

        &:active {
          background: var(--nav-item-active-background, white);
          border-color: var(
            --nav-item-active-border-color,
            LightGrey LightGrey white LightGrey
          );
        }

        &[aria-current="page"] {
          background: var(--nav-item-current-background, white);
          border-color: var(
            --nav-item-current-border-color,
            LightGrey LightGrey white LightGrey
          );
        }

        &:disabled {
          background: var(--nav-item-disabled-background, transparent);
          border-color: var(--nav-item-disabled-border-color, LightGrey);
          color: var(--nav-item-disabled-color, inherit);
          text-decoration: var(--nav-item-disabled-text-decoration, none);
          pointer-events: var(--nav-item-disabled-pointer-events, none);
          opacity: var(--nav-item-disabled-opacity, 0.5);
        }
      }
    }
  }
}