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: false —
Sizing
These size modifier classes support responsive modifiers.
— modifier: false —
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: false —
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;