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: