-
Notifications
You must be signed in to change notification settings - Fork 10
/
hdr.navbar.example.xml
124 lines (124 loc) · 4.07 KB
/
hdr.navbar.example.xml
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<!-- Modify -xxl to change container size -->
<div class="container-xxl">
<!-- This shows the menu on mobile -->
<div class="bd-navbar-toggle">
<button
class="navbar-toggler p-2"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#bdSidebar"
aria-controls="bdSidebar"
aria-label="Toggle docs navigation"
>
<i class="bi bi-list"/>
</button>
</div>
<a class="navbar-brand" href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-bootstrap"
viewBox="0 0 16 16"
>
<path
d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
/>
<path
d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
/>
</svg>
DITA Bootstrap
</a>
<button
class="navbar-toggler p-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="bi bi-three-dots"/>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link Two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link Three</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<!--
This is a dark/light color theme toggler.
It requires JavaScript to function.
-->
<li class="nav-item dropdown">
<a
href="#"
class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-color-mode"
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-display="static"
>
<span class="d-light">
<i class="bi bi-brightness-high-fill"/>
</span>
<span class="d-dark">
<i class="bi bi-moon-stars-fill"/>
</span>
<span class="d-auto">
<i class="bi bi-circle-half"/>
</span>
<span class="d-lg-none ms-2">Toggle color mode</span>
</a>
<ul
class="dropdown-menu dropdown-menu-end"
aria-labelledby="bd-color-mode"
style="--bs-dropdown-min-width: 6rem;"
data-bs-popper="static"
>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="light"
>
<i class="bi bi-brightness-high-fill"/>
<span class="ms-2">Light</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="dark"
>
<i class="bi bi-moon-stars-fill"/>
<span class="ms-2">Dark</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item d-flex align-items-center"
data-bs-theme-value="auto"
>
<i class="bi bi-circle-half"/>
<span class="ms-2">Auto</span>
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>