Pills

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to style a navigation list and to draw focus to an active link.

Design and coding

Basic use

Default

Navigation list exists horizontally.

Appearance
Correct use

Compliance point(s):

  • Do not use this feature
    • It is inherited from Bootstrap but its intended purpose is not compatible with WET
    • Use other options, such as Tabs, List group or Pagination for navigation purposes
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<ul class="nav nav-pills">
 <li class="active"><a href="#">A</a></li>
 <li><a href="#">B</a></li>
 <li><a href="#">C</a></li>
</ul>

Vertical

Navigation list exists vertically by adding .nav-stacked.

Appearance
Correct use

Compliance point(s):

  • Do not use this feature
    • It is inherited from Bootstrap but its intended purpose is not compatible with WET
    • Use other options, such as Tabs, List group or Pagination for navigation purposes
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<ul class="nav nav-pills nav-stacked">
 ...
</ul>

Disabled

Style a navigation list item as disabled by adding .disabled.

Appearance
Correct use

Compliance point(s):

  • Do not use this feature
    • It is inherited from Bootstrap but its intended purpose is not compatible with WET
    • Use other options, such as Tabs, List group or Pagination for navigation purposes
    • This class will only change the <a>'s appearance, not its functionality
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<ul class="nav nav-pills">
<li class="disabled">...</li>
 ...
</ul>

Justified

Navigation list exists horizontally across entire grid column using .nav-justify.

Appearance
Correct use

Compliance point(s):

  • Do not use this feature
    • It is inherited from Bootstrap but its intended purpose is not compatible with WET
    • Use other options, such as Tabs, List group or Pagination for navigation purposes
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<ul class="nav nav-pills nav-justified">
 ...
</ul>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: