Code example
The example below shows all you need to create the navigation. Usually the page layouts will be used so you'll have to add the code in the wrapper provided for the primary or secondary navigation. The styling and responsive behaviour will be taken care of for you thanks to the layouts.
Inside the ox-navigation-container you can add multiple navigation lists. To set an active item in the list, add the ARIA attribute aria-current="page" to the concerning list item.
If the whole site revolves around getting the user to make one primary action (e.g. placing an order), you can add a button to the to the navigation container. Usually this wil be a ox-button--primary to attract all the attention. The class ox-navigation-container__action will need to be added for the positioning and last but not least, the classes ox-button--rounded and ox-button--lifted for extra styling.
By adding the class ox-navigation--grow to either a navigation list or a navigation button, you'll force that item to occupy most of the space and this results in all the following navigation blocks to be positioned at the end of the navigation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav role="navigation" class="ox-navigation-container">
<ul class="ox-navigation ox-navigation--grow">
<li class="ox-navigation__item" aria-current="page">
<a href="#" class="ox-navigation__item__link">Item 1</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 2</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 3</a>
</li>
</ul>
<button class="ox-button ox-button--primary ox-button--lifted ox-button--rounded ox-navigation-container__action" type="button"><span class="ox-button__icon ox-icon ox-icon--plus"></span> Main site action</button>
<ul class="ox-navigation">
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--user"></span> Item 4</a>
</li>
</ul>
</nav>
Types
If custom page layouts are needed, the above code won't be styled, this can be done by adding a wrapper with the class ox-navigation-horizontal or ox-navigation-vertical. Since we don't know what level of navigation is used in the custom layout, you'll have to add the responsive behavious yourself.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="ox-navigation-horizontal">
<nav role="navigation" class="ox-navigation-container">
<ul class="ox-navigation ox-navigation--grow">
<li class="ox-navigation__item" aria-current="page">
<a href="#" class="ox-navigation__item__link">Item 1</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 2</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 3</a>
</li>
</ul>
<button class="ox-button ox-button--primary ox-button--lifted ox-button--rounded ox-navigation-container__action" type="button"><span class="ox-button__icon ox-icon ox-icon--plus"></span> Main site action</button>
<ul class="ox-navigation">
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--user"></span>Item 4</a>
</li>
</ul>
</nav>
</div>
Responsive navigation
When using the page layouts provided by OX, the primary navigation will be hidden behind a hamburger icon on smaller screens. For this to work you'll need to add a checkbox with the class ox-toggle-navigation above the header as well as the ox-hamburger and all it's child spans in the header.
Because the checkbox to trigger the mobile navigation is the first element on the page, you'll have to add a tabindex to it and to the ox-header__site-name to maintain a logical tab order.
There's no javascript needed and if you added the primary navigation correctly (inside the ox-layout__primary-navigation-wrapper wrapper, everything works automatically.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="ox-layout--vertical">
<input type="checkbox" class="ox-toggle-navigation" id="dox-toggle-example-nav" tabindex="2"/>
<header class="ox-layout__header" role="banner">
<div class="ox-header-container">
<a href="/" class="ox-header__site-name" tabindex="1">OX</a>
<label for="dox-toggle-example-nav" tabindex="0" class="ox-hamburger" role="button" aria-label="Toggle navigation">
<span class="ox-hamburger__line ox-hamburger__line--top" role="none presentation"></span>
<span class="ox-hamburger__line ox-hamburger__line--middle" role="none presentation"></span>
<span class="ox-hamburger__line ox-hamburger__line--bottom" role="none presentation"></span>
</label>
</div>
</header>
<div class="ox-layout__primary-navigation-wrapper">
<label for="dox-toggle-example-nav" class="ox-navigation-container__close"><span class="ox-icon ox-icon--close ox-icon--small"></span></label>
<nav role="navigation" class="ox-navigation-container">
<ul class="ox-navigation">
<li class="ox-navigation__item" aria-current="page">
<a href="#" class="ox-navigation__item__link">Item 1</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 2</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link">Item 3</a>
</li>
</ul>
<button class="ox-button ox-button--primary ox-button--lifted ox-button--rounded ox-navigation-container__action ox-navigation--grow" type="button"><span class="ox-button__icon ox-icon ox-icon--plus"></span> Main site action</button>
<ul class="ox-navigation">
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--user"></span> Item 4</a>
</li>
</ul>
</nav>
</div>
</div>