Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Nav-strip

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.

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "activeSelector" : "&.is-active, &.has-active",
  "color" : null,
  "color-active" : null,
  "color-hover" : null,
  "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 null Type color for the nav-strip.
color-active Color null Type color for the nav-strip when active.
color-hover Color null Type color for the nav-strip when hovered or focused.
font-weight CssValue null Font weight of navstrip.
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 orange Underline color when link is active.
underline-size Dimension 3px Size of the underline.
underline-color-hover Color gray Color of the underline when hovered or focused.
rule-color String rule 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 navstrip.

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

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

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