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).

Primary nav - with home icon and additonal mobile link.

This example shows a navbar-nav-primary with class of bc-navbar-nav-has-home-icon to signify that we want the first link to be a home icon (hidden on mobile).

On mobile it is controled with a single <button> but there is also an additional link shown on this example. This is very typical of our country menus both on mobile and desktop.

It also shows that 'Our work in arts, education and society' is the active page.

Mircosite nav - with home icon and additonal mobile link.