Dot nav

Dot navigation component pack for Seed

Install

npm install seed-dot-nav --save

Dependencies


Example

<ul class="c-dot-nav">
  <li class="c-dot-nav__item is-active">
    <a href="#" class="c-dot-nav__link">Link</a>
  </li>
  <li class="c-dot-nav__item">
    <a href="#" class="c-dot-nav__link">Link</a>
  </li>
  <li class="c-dot-nav__item">
    <a href="#" class="c-dot-nav__link">Link</a>
  </li>
</ul>

Modifiers

Alignment

These size modifier classes support responsive modifiers.

Modifier Class Description
Left c-dot-nav--left Aligns the component to the left
Center c-dot-nav--center Aligns the component in the center (horizontally)
Right c-dot-nav--right Aligns the component to the right

Left

<ul class="c-dot-nav c-dot-nav--left">
  ...
</ul>

Center

<ul class="c-dot-nav c-dot-nav--center">
  ...
</ul>

Right

<ul class="c-dot-nav c-dot-nav--right">
  ...
</ul>

Sizing

These size modifier classes support responsive modifiers.

Modifier Class Description
Large c-dot-nav--dot-lg Changes the dot sizes to 16px
Medium c-dot-nav--dot-md Changes the dot sizes to 10px (Default size)
Small c-dot-nav--dot-sm Changes the dot sizes to 8px

Large

<ul class="c-dot-nav c-dot-nav--dot-lg">
  ...
</ul>

Medium

<ul class="c-dot-nav c-dot-nav--dot-md">
  ...
</ul>

Small

<ul class="c-dot-nav c-dot-nav--dot-sm">
  ...
</ul>

Styles

Static

A static .c-dot-nav component is used to indicate progress, typically used in wizard or step-based interfaces. The .c-dot-nav--static modifier class removes hover styles and resets the cursor to the standard pointer.

Completed: 2/5

<p>
  Completed: 2/5
</p>
<ul class="c-dot-nav c-dot-nav--static">
  <li class="c-dot-nav__item is-active">
    <span href="#" class="c-dot-nav__link"></span>
  </li>
  <li class="c-dot-nav__item is-active">
    <span href="#" class="c-dot-nav__link"></span>
  </li>
  <li class="c-dot-nav__item">
    <span href="#" class="c-dot-nav__link"></span>
  </li>
  <li class="c-dot-nav__item">
    <span href="#" class="c-dot-nav__link"></span>
  </li>
  <li class="c-dot-nav__item">
    <span href="#" class="c-dot-nav__link"></span>
  </li>
</ul>

States

Dot nav items can have individual states.

Modifier Class Description
Active is-active Changes the default dot color
Disabled is-disabled Mutes the dot and disables the cursor

Active

<ul class="c-dot-nav">
  <li class="c-dot-nav__item is-active">
    ...
  </li>
</ul>

Disabled

<ul class="c-dot-nav">
  <li class="c-dot-nav__item is-disabled">
    ...
  </li>
</ul>

Configurations

Below are the default Sass configuration variables for seed-dot-nav. The variables can be found in the pack’s _config.scss file.

seed-dot-nav/_config.scss
// Namespace
$seed-dot-nav-namespace: c-dot-nav !default;
$seed-dot-nav-item-namespace: #{$seed-dot-nav-namespace}__item !default;
$seed-dot-nav-link-namespace: #{$seed-dot-nav-namespace}__link !default;

// Configs
$seed-dot-nav-item-spacing-multiplier: 3 !default;
$seed-dot-nav-link-focus-outline: none !default;
$seed-dot-nav-dot-transition: background-color 0.2s ease !default;
$seed-dot-nav-dot-size: 10px !default;
$seed-dot-nav-dot-color: rgba(black, 0.2) !default;
$seed-dot-nav-dot-color-hover: rgba(black, 0.4) !default;
$seed-dot-nav-dot-active-color: #3197D6 !default;
$seed-dot-nav-dot-active-size-increase: 1px !default;
$seed-dot-nav-dot-transform: translate(-50%, -50%) !default;

$seed-dot-nav-alignment: (
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

$seed-dot-nav-dot-sizes: (
  lg: 16px,
  md: $seed-dot-nav-dot-size,
  sm: 8px,
) !default;