View on GitHub
Local navigation
Local navigation is used as a secondary level navigation.
Default local navigation
Use <ul>
element with the .container
(or .container-fluid
) class, wrapped in a <nav>
tag with .o-nav-local
class.
You also need to choose a color scheme by setting .navbar-light
or .navbar-dark
on your <nav>
element.
Accessibility
In addition to the .active
class, you must use aria-current="page"
attribute to represent the current item within the navigation group. This is to ensure a better accessibility to assistive technologies (such as screenreaders, screen magnifiers…) that support it by informing the user about the current element.
Dark background
Simply switch .navbar-light
to .navbar-dark
class to your .o-nav-local
parent <nav>
container.