Code example
Use one of the layout classes to define the desired page format (preferably .ox-layout).
Inside the layout class, you'll have to add a header .ox-layout__header containing an anchor with the class .ox-header__site-name.
Beside the header, the navigation container .ox-layout__primary-navigation-wrapper needs to be added. This can contain the main navigation and/or additional account or settings dropmenu's as illustrated below.
Example
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
...
<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="toggle-navigation-example" 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">
<nav role="navigation" class="ox-navigation-container">
<label for="toggle-navigation-example" class="ox-navigation-container__close"><span class="ox-icon ox-icon--close ox-icon--small"></span></label>
<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--rounded ox-button--lifted ox-navigation-container__action"
type="button"><span class="ox-button__icon ox-icon ox-icon--plus"></span> Main site action</button>
<form action="/search" method="get">
<div class="ox-form__group ox-navigation__form-group">
<div class="ox-form__input-group ox-form__input-group--small ox-form__input-group--prepend">
<input type="search" id="search-box" name="query" class="ox-form__field ox-form__field--small" placeholder="Search..." size="30">
<label for="search-box" class="ox-form__input-group__icon" role="presentation"><span class="ox-icon ox-icon--search"></span></label>
</div>
</div>
</form>
<ul class="ox-navigation ox-hide-large-up">
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--support"></span> FAQ</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--refresh"></span> Updates</a>
</li>
</ul>
<ul class="ox-navigation ox-hide-large-up">
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-icon ox-icon--settings"></span> Settings</a>
</li>
<li class="ox-navigation__item">
<a href="#" class="ox-navigation__item__link"><span class="ox-navigation__item__link__icon ox-navigation__item__link__icon--error ox-icon ox-icon--power"></span> Log out</a>
</li>
</ul>
<div class="ox-dropmenu-wrapper ox-show-large-up" aria-haspopup="true">
<input type="checkbox" class="ox-dropmenu-toggle" id="toggle-additional-nav">
<label for="toggle-additional-nav" class="ox-dropmenu__trigger ox-button ox-button--plain ox-button--icon-small" role="button" aria-label="Toggle account nav">
<span class="ox-icon ox-icon--ellipsis-vertical"></span>
</label>
<div class="ox-dropmenu">
<ul class="ox-dropmenu__list" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
<li class="ox-dropmenu__option" role="presentation">
<a href="#" class="ox-dropmenu__option__button" role="menuitem">
<span class="ox-icon ox-icon--support"></span> FAQ
</a>
</li>
<li class="ox-dropmenu__option" role="presentation">
<button class="ox-dropmenu__option__button" role="menuitem">
<span class="ox-icon ox-icon--refresh"></span> Updates
</button>
</li>
</ul>
</div>
</div>
<div class="ox-dropmenu-wrapper ox-show-large-up" aria-haspopup="true">
<input type="checkbox" class="ox-dropmenu-toggle" id="toggle-account-nav">
<label for="toggle-account-nav" class="ox-dropmenu__trigger ox-button ox-button--secondary ox-button--icon-small" role="button" aria-label="Toggle account nav">
<span class="ox-icon ox-icon--user"></span>
</label>
<div class="ox-dropmenu">
<ul class="ox-dropmenu__list" tabindex="-1" role="menu" aria-label="Overflow" data-floating-menu-direction="bottom">
<li class="ox-dropmenu__option" role="presentation">
<a href="#" class="ox-dropmenu__option__button" role="menuitem">
<span class="ox-dropmenu__option__icon ox-icon ox-icon--settings"></span>
Settings
</a>
</li>
<li class="ox-dropmenu__option ox-dropmenu__option--separator ox-dropmenu__option--error" role="presentation">
<button class="ox-dropmenu__option__button" role="menuitem">
<span class="ox-dropmenu__option__icon ox-icon ox-icon--power"></span>
Log out
</button>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--start-hide-code--></div>