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 {
    align-items: var(--nav-align-items, center);
    background: var(--nav-background, transparent);
    border-color: var(--nav-border-color, transparent);
    border-radius: var(--nav-border-radius, 0);
    border-style: var(--nav-border-style, solid);
    border-width: var(--nav-border-width, 0);
    color: var(--nav-color, inherit);
    display: var(--nav-display, flex);
    flex-flow: var(--nav-flex-flow, wrap row);
    gap: var(--nav-gap, 0);
    justify-content: var(--nav-justify-content, flex-start);
    list-style: var(--nav-list-style, none);

    margin-block-start: var(--nav-margin-top, 0);
    margin-inline-end: var(--nav-margin-right, 0);
    margin-block-end: var(--nav-margin-bottom, var(--size-3));
    margin-inline-start: var(--nav-margin-left, 0);

    padding: var(--nav-padding, 0);
    position: var(--nav-position, relative);

    &.nav--stacked {
      --nav-item-justify-content: flex-start;
      --nav-item-width: 100%;

      align-items: var(--nav-align-items, stretch);
      flex-flow: var(--nav-flex-flow, wrap column);
    }

    &.nav--tabs {
      --nav-item-border-color: inherit;
      --nav-item-border-radius-top-left: var(--size-2);
      --nav-item-border-radius-top-right: var(--size-2);
      --nav-item-border-radius-bottom-left: 0;
      --nav-item-border-radius-bottom-right: 0;
      --nav-item-border-width: 1px;

      --nav-item-margin-bottom: -1px;

      --nav-item-current-background: var(--color-background);
      --nav-item-current-border-color: var(--color-border) var(--color-border)
        var(--color-background) var(--color-border);

      --nav-item-hover-background: var(--color-neutral-hover);
      --nav-item-hover-border-color: var(--color-border);
      --nav-item-hover-color: var(--color-text);
      --nav-item-hover-text-decoration: none;

      --nav-item-focus-background: var(--color-neutral-hover);
      --nav-item-focus-border-color: var(--color-border);
      --nav-item-focus-color: var(--color-text);
      --nav-item-focus-text-decoration: none;

      --nav-item-active-background: var(--color-background);
      --nav-item-active-border-color: var(--color-border) var(--color-border)
        var(--color-background) var(--color-border);

      --nav-item-selected-background: var(--color-background);
      --nav-item-selected-border-color: var(--color-border) var(--color-border)
        var(--color-background) var(--color-border);

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

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

        padding-block: 0;
        padding-inline: var(--nav-padding-x, var(--size-3));
      }
    }
  }

  .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-start-start-radius: var(
      --nav-item-border-radius-top-left,
      var(--nav-item-border-radius, 0)
    );
    border-start-end-radius: var(
      --nav-item-border-radius-top-right,
      var(--nav-item-border-radius, 0)
    );
    border-end-start-radius: var(
      --nav-item-border-radius-bottom-left,
      var(--nav-item-border-radius, 0)
    );
    border-end-end-radius: var(
      --nav-item-border-radius-bottom-right,
      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-block-start: var(--nav-item-margin-top, 0);
    margin-inline-end: var(--nav-item-margin-right, 0);
    margin-block-end: var(--nav-item-margin-bottom, 0);
    margin-inline-start: var(--nav-item-margin-left, 0);

    outline: var(--nav-item-outline, 0);

    padding-block-start: var(--nav-item-padding-top, var(--size-3));
    padding-inline-end: var(--nav-item-padding-right, var(--size-5));
    padding-block-end: var(--nav-item-padding-bottom, var(--size-3));
    padding-inline-start: 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);

    &[aria-current="page"],
    &[data-active="true"] {
      background: var(
        --nav-item-current-background,
        var(--color-neutral-hover)
      );
      border-color: var(--nav-item-current-border-color, transparent);
      color: var(--nav-item-current-color, var(--color-text));
      text-decoration: var(--nav-item-current-text-decoration, none);
    }

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

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

    &:active {
      background: var(--nav-item-active-background, var(--color-neutral-hover));
      border-color: var(--nav-item-active-border-color, transparent);
      color: var(--nav-item-active-color, var(--color-text));
      text-decoration: var(--nav-item-active-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, var(--color-text));
      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);
    }
  }
}