Nav-strip

Jump To:

A horizontal navigation strip or rail that displays a list of links to different pages or sections of a website. The active link, indicating the current page or section, is visually emphasized with an underline.

Demos

Basic Nav Strip

A simple horizontal list of navigation links with an active state underline.

<nav class="nav-strip">
  <ul class="nav-strip__list">
    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Overview</a></li>
    <li class="nav-strip__item"><a href="#" class="nav-strip__link is-active">Features</a></li>
    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Pricing</a></li>
    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Support</a></li>
  </ul>
</nav>

Nav Strip with Base Rule

Using the `nav-strip--rule` modifier to add a continuous horizontal line beneath the navigation items.

<nav class="nav-strip nav-strip--rule">
  <ul class="nav-strip__list">
    <li class="nav-strip__item"><a href="#" class="nav-strip__link is-active">Dashboard</a></li>
    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Settings</a></li>
    <li class="nav-strip__item"><a href="#" class="nav-strip__link">Analytics</a></li>
  </ul>
</nav>

Automatic (Markup Only) Nav Strip

The `nav-strip--auto` modifier applies styling to standard `ul/li/a` tags without requiring component-specific classes on every element.

<div class="nav-strip nav-strip--auto">
  <ul>
    <li><a href="#" class="is-active">Recent</a></li>
    <li><a href="#">Popular</a></li>
    <li><a href="#">Trending</a></li>
  </ul>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "activeSelector" : "&.is-active, &.has-active",
  "color" : "type-tertiary",
  "color-active" : "type",
  "color-hover" : "type",
  "font-weight" : null,
  "margin-between" : 2.25em,
  "padding-x" : 0,
  "padding-y" : 0.3em,
  "padding-y-ruled" : null,
  "nowrap" : true,
  "rule-color" : "rule-light",
  "rule-offset" : 0,
  "rule-size" : 3px,
  "underline-color" : "selected",
  "underline-color-hover" : "rule",
  "underline-size" : 3px,
);

File Information

File: _nav-strip.scss
Group: nav-strip
Type: variable
Lines (comments): 16-33
Lines (code): 35-52

Map Properties

Name	Type	Default	Description
activeSelector	String	.is-active	Selector that portrays active status.
color	Color	"type-tertiary"	Type color for the nav-strip.
color-active	Color	"type"	Type color for the nav-strip when active.
color-hover	Color	"type-hover"	Type color for the nav-strip when hovered or focused.
font-weight	CssValue	null	Font weight of nav-strip.
margin-between	Dimension	2.25em	Margin between nav-strip items.
nowrap	Boolean	true	Disables the word wrap.
padding-x	Dimension	0	Horizontal padding for the nav-strip links.
padding-y	Dimension	0.3em	Vertical padding for the nav-strip links.
padding-y-ruled	Dimension	null	Vertical padding for the nav-strip links when using nav-strip--rule.
underline-color	Color	"selected"	Underline color when link is active.
underline-size	Dimension	3px	Size of the underline.
underline-color-hover	Color	"rule"	Color of the underline when hovered or focused.
rule-color	String	"rule-light"	Rule color. Uses rule.scss so the value of this options should be a variable from rule.scss.
rule-size	Dimension	3px	Size of the nav-strip rule.
rule-offset	Dimension	-3px	Offset the rule for the nav-strip.

Mixins

set()

Mixin

Change modules $config

File Information

File: _nav-strip.scss
Group: nav-strip
Type: mixin
Lines (comments): 55-58
Lines (code): 60-62

Examples

@include ulu.component-nav-strip-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _nav-strip.scss
Group: nav-strip
Type: mixin
Lines (comments): 73-75
Lines (code): 77-157

Examples

@include ulu.component-nav-strip-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _nav-strip.scss
Group: nav-strip
Type: function
Lines (comments): 64-67
Lines (code): 69-71

Examples

@include ulu.component-nav-strip-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config