Navbar navs
These are build on top of the bootstrap navbar compoents, as such all the defaults are still available.
Active items have a class of active
on the link, whereas active sections have a class of active
on the list item.
Navbars on mobile
All .navbar-nav
's are hidden on small devives by default so you will need to use the .bc-btn-navbar-group
component with some <button>
's to control the show-hiding.
The type of button you will need will look somethign like this:<button class="btn bc-menu-toggle" data-target="{selector-to-show-hide}">
The JS will pick up the data-target
as a selector and will show/hide that item(s).
The .bc-btn-navbar-group
support normal <a class="btn">
's for when a link such 'Contact' is need on mobile next to 'Menu'.
See Header examples
Primary nav
The most notible thing about these menus is that they support all the Solas UI primary dropdown menu styles.
The drop downs are driven by JavaScript to offer best accessibility - Adobe Accessible Mega Menu.
Primary nav - Basic
This first example shows a navbar-nav-primary
, a typical primary navigation. On mobile it is controlled with a single <button>
.
It also shows that 'Learn English' is the active-trail
section (no active page in the top level).