Stylament 0.25.1

Navigation

body > nav:first-of-type

scss 
body > nav:first-of-type {
  $size: svar(length-2);
  ---flow-space: 0em;
  ---item-block-size: #{$size};
  ---item-line-height: #{svar(length-1dim)};
  ---item-padding: #{svar(length-1dim)};
  ---toggle-size: #{$size};
  ---toggle-padding: #{svar(length-0½)};
  ---toggle-shadow: #{svar(shadow-sm)};
  ---toggle-folded-shadow: #{svar(shadow-lg)};

  & > menu {
    & > li {
      @include coloring.set-colors("nav", "alternate");
      @include coloring.use-colors;

      & > a {
        color: inherit;
        background-color: transparent;
        text-decoration: none;
      }
    }
  }
}

The first nav is implicitly considered the main navigation.

A horizontal navigation menu.

$nav-wide

scss 
$nav-wide: map.get(container.$sizes, "nav-wide");

Breakpoint for switching to wide layout.

Requires

$sizes@container (Map)

menu[role="menubar"]

scss 
menu[role="menubar"] {
  // Horizontal nav as long as items have enough space.
  ---threshold: #{$nav-wide};
  @extend .lyo-switcher;
  & > li {
    display: block;
    text-align: center;
  }
}

Menu bar. Places items on a horizontal level if enough space is available.

Treeview

scss 
[role="tree"] {
  ---indent: #{svar(spacing-inline-md)};

  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
}