@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/CHANGELOG.md +91 -3
- package/data/component-guidance.json +2 -2
- package/data/components/avatar-product-switch.md +175 -60
- package/data/components/container.md +113 -0
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +673 -957
- package/data/components/navigation.md +5869 -2148
- package/data/components/shellbar.md +16 -16
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
- package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
- package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
- package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/shellbar/optional-items.example.html +2 -2
- package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
- package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
- package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
- package/package.json +1 -1
|
@@ -60,319 +60,291 @@ npm install fundamental-styles
|
|
|
60
60
|
## Basic Usage
|
|
61
61
|
|
|
62
62
|
```html
|
|
63
|
-
<nav
|
|
64
|
-
class="fd-navigation fd-navigation--horizontal"
|
|
65
|
-
aria-label="Horizontal Navigation">
|
|
63
|
+
<nav class="fd-navigation fd-navigation--horizontal" aria-label="Horizontal Navigation">
|
|
66
64
|
<div class="fd-navigation__container">
|
|
67
|
-
<ul
|
|
68
|
-
class="fd-navigation__list"
|
|
69
|
-
role="menubar"
|
|
70
|
-
aria-label="Horizontal Navigation"
|
|
71
|
-
>
|
|
72
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
|
|
65
|
+
<ul class="fd-navigation__list" role="menubar" aria-label="Horizontal Navigation">
|
|
66
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
73
67
|
<div
|
|
74
68
|
class="fd-navigation__item"
|
|
75
69
|
aria-current="page"
|
|
76
|
-
aria-selected="
|
|
70
|
+
aria-selected="false"
|
|
77
71
|
aria-expanded="false"
|
|
78
72
|
role="menuitem"
|
|
79
73
|
>
|
|
80
74
|
<a class="fd-navigation__link" role="link" href="#">
|
|
81
|
-
<span
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
>
|
|
94
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
95
|
-
<span class="fd-navigation__icon sap-icon--calendar" role="presentation" aria-hidden="true"></span>
|
|
96
|
-
<span class="fd-navigation__text">Appointment</span>
|
|
97
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
98
|
-
</a>
|
|
99
|
-
</div>
|
|
100
|
-
</li>
|
|
101
|
-
|
|
102
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
103
|
-
<div
|
|
104
|
-
class="fd-navigation__item"
|
|
105
|
-
aria-current="false"
|
|
106
|
-
aria-expanded="false"
|
|
107
|
-
role="menuitem"
|
|
108
|
-
>
|
|
109
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
110
|
-
<span class="fd-navigation__icon sap-icon--database" role="presentation" aria-hidden="true"></span>
|
|
111
|
-
<span class="fd-navigation__text">Data</span>
|
|
112
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
113
|
-
</a>
|
|
114
|
-
</li>
|
|
115
|
-
|
|
116
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
117
|
-
<div
|
|
118
|
-
class="fd-navigation__item"
|
|
119
|
-
aria-current="false"
|
|
120
|
-
aria-expanded="false"
|
|
121
|
-
role="menuitem"
|
|
122
|
-
>
|
|
123
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
124
|
-
<span class="fd-navigation__icon sap-icon--attachment" role="presentation" aria-hidden="true"></span>
|
|
125
|
-
<span class="fd-navigation__text">Attachment</span>
|
|
126
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
75
|
+
<span
|
|
76
|
+
class="fd-navigation__icon sap-icon--home"
|
|
77
|
+
role="presentation"
|
|
78
|
+
aria-hidden="true"
|
|
79
|
+
></span>
|
|
80
|
+
<span class="fd-navigation__text">Home</span>
|
|
81
|
+
<span
|
|
82
|
+
class="fd-navigation__selection-indicator"
|
|
83
|
+
role="presentation"
|
|
84
|
+
aria-hidden="true"
|
|
85
|
+
aria-label="selection indicator"
|
|
86
|
+
></span>
|
|
127
87
|
</a>
|
|
128
88
|
</li>
|
|
129
89
|
|
|
130
90
|
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
131
|
-
<div
|
|
132
|
-
class="fd-navigation__item"
|
|
133
|
-
aria-current="false"
|
|
134
|
-
aria-expanded="false"
|
|
135
|
-
role="menuitem"
|
|
136
|
-
>
|
|
91
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
137
92
|
<a class="fd-navigation__link" role="link" href="#">
|
|
138
|
-
<span
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
>
|
|
152
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
153
|
-
<span class="fd-navigation__icon sap-icon--basket" role="presentation" aria-hidden="true"></span>
|
|
154
|
-
<span class="fd-navigation__text">Basket</span>
|
|
155
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
156
|
-
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator"></span>
|
|
157
|
-
</a>
|
|
158
|
-
<div class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
|
|
159
|
-
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
160
|
-
<ul class="fd-navigation__list fd-navigation__list--child-items" role="tree" aria-roledescription="Navigation List Tree - Child Items" tabindex="-1" aria-hidden="true">
|
|
161
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
162
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Future Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
163
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
164
|
-
<span class="fd-navigation__text">Future Orders</span>
|
|
165
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
166
|
-
</a>
|
|
167
|
-
</div>
|
|
168
|
-
</li>
|
|
169
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
170
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Current Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="true">
|
|
171
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
172
|
-
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
173
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
174
|
-
</a>
|
|
175
|
-
</div>
|
|
176
|
-
</li>
|
|
177
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
178
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Past Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
179
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
180
|
-
<span class="fd-navigation__text">Past Orders</span>
|
|
181
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
182
|
-
</a>
|
|
183
|
-
</div>
|
|
184
|
-
</li>
|
|
185
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
186
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Lost Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
187
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
188
|
-
<span class="fd-navigation__text">Lost Orders</span>
|
|
189
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
190
|
-
</a>
|
|
191
|
-
</div>
|
|
192
|
-
</li>
|
|
193
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
194
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Forgotten Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
195
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
196
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
197
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
198
|
-
<span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
|
|
199
|
-
</a>
|
|
200
|
-
</div>
|
|
201
|
-
</li>
|
|
202
|
-
</ul>
|
|
203
|
-
</div>
|
|
93
|
+
<span
|
|
94
|
+
class="fd-navigation__icon sap-icon--attachment"
|
|
95
|
+
role="presentation"
|
|
96
|
+
aria-hidden="true"
|
|
97
|
+
></span>
|
|
98
|
+
<span class="fd-navigation__text">Attachment</span>
|
|
99
|
+
<span
|
|
100
|
+
class="fd-navigation__selection-indicator"
|
|
101
|
+
role="presentation"
|
|
102
|
+
aria-hidden="true"
|
|
103
|
+
aria-label="selection indicator"
|
|
104
|
+
></span>
|
|
105
|
+
</a>
|
|
204
106
|
</div>
|
|
205
107
|
</li>
|
|
206
108
|
|
|
207
109
|
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
208
|
-
<div
|
|
209
|
-
class="fd-navigation__item"
|
|
210
|
-
aria-current="false"
|
|
211
|
-
aria-expanded="false"
|
|
212
|
-
role="menuitem"
|
|
213
|
-
>
|
|
110
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
214
111
|
<a class="fd-navigation__link" role="link" href="#">
|
|
215
|
-
<span
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
|
|
230
|
-
<span class="fd-navigation__text">Cog</span>
|
|
231
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
232
|
-
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
|
|
233
|
-
</a>
|
|
234
|
-
</li>
|
|
235
|
-
|
|
236
|
-
<li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
|
|
112
|
+
<span
|
|
113
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
114
|
+
role="presentation"
|
|
115
|
+
aria-hidden="true"
|
|
116
|
+
></span>
|
|
117
|
+
<span class="fd-navigation__text">Time</span>
|
|
118
|
+
<span
|
|
119
|
+
class="fd-navigation__selection-indicator"
|
|
120
|
+
role="presentation"
|
|
121
|
+
aria-hidden="true"
|
|
122
|
+
aria-label="selection indicator"
|
|
123
|
+
></span>
|
|
124
|
+
</a>
|
|
125
|
+
</div>
|
|
237
126
|
</li>
|
|
238
127
|
|
|
239
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-
|
|
128
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
240
129
|
<div
|
|
241
|
-
class="fd-navigation__item"
|
|
130
|
+
class="fd-navigation__item fd-popover__control"
|
|
242
131
|
aria-current="false"
|
|
243
132
|
aria-expanded="true"
|
|
133
|
+
aria-selected="true"
|
|
134
|
+
aria-haspopup="tree"
|
|
244
135
|
role="menuitem"
|
|
245
136
|
>
|
|
246
137
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
247
|
-
<span
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
279
|
-
role="menuitem"
|
|
280
|
-
aria-disabled="false"
|
|
281
|
-
aria-posinset="2"
|
|
282
|
-
aria-setsize="3"
|
|
283
|
-
aria-haspopup="menu"
|
|
284
|
-
aria-labelledby="txt-2"
|
|
285
|
-
aria-expanded="true"
|
|
286
|
-
aria-owns="children-menu"
|
|
138
|
+
<span
|
|
139
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
140
|
+
role="presentation"
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
></span>
|
|
143
|
+
<span class="fd-navigation__text">Basket</span>
|
|
144
|
+
<span
|
|
145
|
+
class="fd-navigation__selection-indicator"
|
|
146
|
+
role="presentation"
|
|
147
|
+
aria-hidden="true"
|
|
148
|
+
aria-label="selection indicator"
|
|
149
|
+
></span>
|
|
150
|
+
<span
|
|
151
|
+
class="fd-navigation__has-children-indicator"
|
|
152
|
+
role="presentation"
|
|
153
|
+
aria-hidden="true"
|
|
154
|
+
aria-label="has children indicator"
|
|
155
|
+
></span>
|
|
156
|
+
</a>
|
|
157
|
+
</div>
|
|
158
|
+
<div
|
|
159
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
160
|
+
aria-hidden="false"
|
|
161
|
+
>
|
|
162
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
163
|
+
<ul
|
|
164
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
165
|
+
role="tree"
|
|
166
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
167
|
+
tabindex="-1"
|
|
168
|
+
aria-hidden="true"
|
|
287
169
|
>
|
|
288
|
-
<
|
|
289
|
-
<
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
aria-hidden="false">
|
|
298
|
-
<div class="fd-navigation__list-wrapper">
|
|
299
|
-
<ul
|
|
300
|
-
class="fd-navigation__list fd-navigation__list--child-items" id="children-menu"
|
|
301
|
-
role="menu"
|
|
302
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
303
|
-
tabindex="-1"
|
|
170
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
171
|
+
<div
|
|
172
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
173
|
+
aria-level="1"
|
|
174
|
+
role="treeitem"
|
|
175
|
+
title="Future Orders"
|
|
176
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
177
|
+
aria-expanded="false"
|
|
178
|
+
aria-selected="false"
|
|
304
179
|
>
|
|
305
|
-
<
|
|
306
|
-
<
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
role="
|
|
310
|
-
aria-
|
|
311
|
-
aria-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
180
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
181
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
182
|
+
<span
|
|
183
|
+
class="fd-navigation__selection-indicator"
|
|
184
|
+
role="presentation"
|
|
185
|
+
aria-hidden="true"
|
|
186
|
+
aria-label="selection indicator"
|
|
187
|
+
></span>
|
|
188
|
+
</a>
|
|
189
|
+
</div>
|
|
190
|
+
</li>
|
|
191
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
192
|
+
<div
|
|
193
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
194
|
+
aria-level="1"
|
|
195
|
+
role="treeitem"
|
|
196
|
+
title="Current Orders"
|
|
197
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
198
|
+
aria-expanded="false"
|
|
199
|
+
aria-selected="true"
|
|
200
|
+
>
|
|
201
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
202
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
203
|
+
<span
|
|
204
|
+
class="fd-navigation__selection-indicator"
|
|
205
|
+
role="presentation"
|
|
206
|
+
aria-hidden="true"
|
|
207
|
+
aria-label="selection indicator"
|
|
208
|
+
></span>
|
|
334
209
|
</a>
|
|
335
210
|
</li>
|
|
336
211
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
337
212
|
<div
|
|
338
|
-
class="fd-navigation__item fd-navigation__item--child
|
|
339
|
-
aria-
|
|
340
|
-
role="
|
|
341
|
-
|
|
342
|
-
aria-
|
|
343
|
-
aria-
|
|
344
|
-
aria-selected="
|
|
213
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
214
|
+
aria-level="1"
|
|
215
|
+
role="treeitem"
|
|
216
|
+
title="Past Orders"
|
|
217
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
218
|
+
aria-expanded="false"
|
|
219
|
+
aria-selected="false"
|
|
345
220
|
>
|
|
346
221
|
<a class="fd-navigation__link" role="link" href="#">
|
|
347
|
-
<span class="fd-navigation__text"
|
|
348
|
-
<span
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
222
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
223
|
+
<span
|
|
224
|
+
class="fd-navigation__selection-indicator"
|
|
225
|
+
role="presentation"
|
|
226
|
+
aria-hidden="true"
|
|
227
|
+
aria-label="selection indicator"
|
|
228
|
+
></span>
|
|
229
|
+
</a>
|
|
230
|
+
</li>
|
|
231
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
232
|
+
<div
|
|
233
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
234
|
+
aria-level="1"
|
|
235
|
+
role="treeitem"
|
|
236
|
+
title="Lost Orders"
|
|
237
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
238
|
+
aria-expanded="false"
|
|
239
|
+
aria-selected="false"
|
|
240
|
+
>
|
|
241
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
242
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
243
|
+
<span
|
|
244
|
+
class="fd-navigation__selection-indicator"
|
|
245
|
+
role="presentation"
|
|
246
|
+
aria-hidden="true"
|
|
247
|
+
aria-label="selection indicator"
|
|
248
|
+
></span>
|
|
249
|
+
</a>
|
|
250
|
+
</li>
|
|
251
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
252
|
+
<div
|
|
253
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
254
|
+
aria-level="1"
|
|
255
|
+
role="treeitem"
|
|
256
|
+
title="Forgotten Orders"
|
|
257
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
258
|
+
aria-expanded="false"
|
|
259
|
+
aria-selected="false"
|
|
260
|
+
>
|
|
261
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
262
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
263
|
+
<span
|
|
264
|
+
class="fd-navigation__selection-indicator"
|
|
265
|
+
role="presentation"
|
|
266
|
+
aria-hidden="true"
|
|
267
|
+
aria-label="selection indicator"
|
|
268
|
+
></span>
|
|
269
|
+
<span
|
|
270
|
+
class="fd-navigation__external-link-indicator"
|
|
271
|
+
role="presentation"
|
|
272
|
+
aria-hidden="true"
|
|
273
|
+
aria-label="external link indicator"
|
|
274
|
+
></span>
|
|
275
|
+
</a>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</li>
|
|
279
|
+
|
|
280
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
281
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
282
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
283
|
+
<span
|
|
284
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
285
|
+
role="presentation"
|
|
286
|
+
aria-hidden="true"
|
|
287
|
+
></span>
|
|
288
|
+
<span class="fd-navigation__text">Shield</span>
|
|
289
|
+
<span
|
|
290
|
+
class="fd-navigation__selection-indicator"
|
|
291
|
+
role="presentation"
|
|
292
|
+
aria-hidden="true"
|
|
293
|
+
aria-label="selection indicator"
|
|
294
|
+
></span>
|
|
295
|
+
</a>
|
|
296
|
+
</div>
|
|
297
|
+
</li>
|
|
298
|
+
|
|
299
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
300
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
301
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
302
|
+
<span
|
|
303
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
304
|
+
role="presentation"
|
|
305
|
+
aria-hidden="true"
|
|
306
|
+
></span>
|
|
307
|
+
<span class="fd-navigation__text">Cog</span>
|
|
308
|
+
<span
|
|
309
|
+
class="fd-navigation__selection-indicator"
|
|
310
|
+
role="presentation"
|
|
311
|
+
aria-hidden="true"
|
|
312
|
+
aria-label="selection indicator"
|
|
313
|
+
></span>
|
|
314
|
+
<span
|
|
315
|
+
class="fd-navigation__has-children-indicator"
|
|
316
|
+
role="presentation"
|
|
317
|
+
aria-hidden="true"
|
|
318
|
+
aria-label="has children indicator, expanded"
|
|
319
|
+
></span>
|
|
320
|
+
</a>
|
|
321
|
+
</div>
|
|
322
|
+
</li>
|
|
323
|
+
|
|
324
|
+
<li
|
|
325
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
326
|
+
role="presentation"
|
|
327
|
+
aria-hidden="true"
|
|
328
|
+
></li>
|
|
329
|
+
|
|
330
|
+
<li
|
|
331
|
+
role="none"
|
|
332
|
+
tabindex="-1"
|
|
333
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
334
|
+
aria-hidden="true"
|
|
335
|
+
>
|
|
336
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
337
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
338
|
+
<span
|
|
339
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
340
|
+
role="presentation"
|
|
341
|
+
aria-hidden="true"
|
|
342
|
+
></span>
|
|
343
|
+
</a>
|
|
344
|
+
</div>
|
|
345
|
+
</li>
|
|
346
|
+
</ul>
|
|
347
|
+
</nav>
|
|
376
348
|
```
|
|
377
349
|
|
|
378
350
|
## Modifiers
|
|
@@ -391,18 +363,12 @@ This component uses the following BEM elements:
|
|
|
391
363
|
- `fd-navigation__icon`
|
|
392
364
|
- `fd-navigation__item`
|
|
393
365
|
- `fd-navigation__item--child`
|
|
394
|
-
- `fd-navigation__item--overflow`
|
|
395
|
-
- `fd-navigation__item--submenu-child`
|
|
396
366
|
- `fd-navigation__item--with-expander`
|
|
397
367
|
- `fd-navigation__link`
|
|
398
368
|
- `fd-navigation__list`
|
|
399
369
|
- `fd-navigation__list--child-items`
|
|
400
|
-
- `fd-navigation__list--parent-items`
|
|
401
370
|
- `fd-navigation__list-container`
|
|
402
|
-
- `fd-navigation__list-container--menu`
|
|
403
|
-
- `fd-navigation__list-container--submenu`
|
|
404
371
|
- `fd-navigation__list-item`
|
|
405
|
-
- `fd-navigation__list-item--home`
|
|
406
372
|
- `fd-navigation__list-item--overflow`
|
|
407
373
|
- `fd-navigation__list-item--spacer`
|
|
408
374
|
- `fd-navigation__list-wrapper`
|
|
@@ -416,319 +382,291 @@ This component uses the following BEM elements:
|
|
|
416
382
|
Horizontal Navigation is an optional alternative to the Vertical Navigation variant.
|
|
417
383
|
|
|
418
384
|
```html
|
|
419
|
-
<nav
|
|
420
|
-
class="fd-navigation fd-navigation--horizontal"
|
|
421
|
-
aria-label="Horizontal Navigation">
|
|
385
|
+
<nav class="fd-navigation fd-navigation--horizontal" aria-label="Horizontal Navigation">
|
|
422
386
|
<div class="fd-navigation__container">
|
|
423
|
-
<ul
|
|
424
|
-
class="fd-navigation__list"
|
|
425
|
-
role="menubar"
|
|
426
|
-
aria-label="Horizontal Navigation"
|
|
427
|
-
>
|
|
428
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
|
|
387
|
+
<ul class="fd-navigation__list" role="menubar" aria-label="Horizontal Navigation">
|
|
388
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
429
389
|
<div
|
|
430
390
|
class="fd-navigation__item"
|
|
431
391
|
aria-current="page"
|
|
432
|
-
aria-selected="
|
|
392
|
+
aria-selected="false"
|
|
433
393
|
aria-expanded="false"
|
|
434
394
|
role="menuitem"
|
|
435
395
|
>
|
|
436
396
|
<a class="fd-navigation__link" role="link" href="#">
|
|
437
|
-
<span
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
>
|
|
450
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
451
|
-
<span class="fd-navigation__icon sap-icon--calendar" role="presentation" aria-hidden="true"></span>
|
|
452
|
-
<span class="fd-navigation__text">Appointment</span>
|
|
453
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
454
|
-
</a>
|
|
455
|
-
</div>
|
|
456
|
-
</li>
|
|
457
|
-
|
|
458
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
459
|
-
<div
|
|
460
|
-
class="fd-navigation__item"
|
|
461
|
-
aria-current="false"
|
|
462
|
-
aria-expanded="false"
|
|
463
|
-
role="menuitem"
|
|
464
|
-
>
|
|
465
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
466
|
-
<span class="fd-navigation__icon sap-icon--database" role="presentation" aria-hidden="true"></span>
|
|
467
|
-
<span class="fd-navigation__text">Data</span>
|
|
468
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
469
|
-
</a>
|
|
470
|
-
</li>
|
|
471
|
-
|
|
472
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
473
|
-
<div
|
|
474
|
-
class="fd-navigation__item"
|
|
475
|
-
aria-current="false"
|
|
476
|
-
aria-expanded="false"
|
|
477
|
-
role="menuitem"
|
|
478
|
-
>
|
|
479
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
480
|
-
<span class="fd-navigation__icon sap-icon--attachment" role="presentation" aria-hidden="true"></span>
|
|
481
|
-
<span class="fd-navigation__text">Attachment</span>
|
|
482
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
397
|
+
<span
|
|
398
|
+
class="fd-navigation__icon sap-icon--home"
|
|
399
|
+
role="presentation"
|
|
400
|
+
aria-hidden="true"
|
|
401
|
+
></span>
|
|
402
|
+
<span class="fd-navigation__text">Home</span>
|
|
403
|
+
<span
|
|
404
|
+
class="fd-navigation__selection-indicator"
|
|
405
|
+
role="presentation"
|
|
406
|
+
aria-hidden="true"
|
|
407
|
+
aria-label="selection indicator"
|
|
408
|
+
></span>
|
|
483
409
|
</a>
|
|
484
410
|
</li>
|
|
485
411
|
|
|
486
412
|
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
487
|
-
<div
|
|
488
|
-
class="fd-navigation__item"
|
|
489
|
-
aria-current="false"
|
|
490
|
-
aria-expanded="false"
|
|
491
|
-
role="menuitem"
|
|
492
|
-
>
|
|
413
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
493
414
|
<a class="fd-navigation__link" role="link" href="#">
|
|
494
|
-
<span
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
>
|
|
508
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
509
|
-
<span class="fd-navigation__icon sap-icon--basket" role="presentation" aria-hidden="true"></span>
|
|
510
|
-
<span class="fd-navigation__text">Basket</span>
|
|
511
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
512
|
-
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator"></span>
|
|
513
|
-
</a>
|
|
514
|
-
<div class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
|
|
515
|
-
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
516
|
-
<ul class="fd-navigation__list fd-navigation__list--child-items" role="tree" aria-roledescription="Navigation List Tree - Child Items" tabindex="-1" aria-hidden="true">
|
|
517
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
518
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Future Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
519
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
520
|
-
<span class="fd-navigation__text">Future Orders</span>
|
|
521
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
522
|
-
</a>
|
|
523
|
-
</div>
|
|
524
|
-
</li>
|
|
525
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
526
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Current Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="true">
|
|
527
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
528
|
-
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
529
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
530
|
-
</a>
|
|
531
|
-
</div>
|
|
532
|
-
</li>
|
|
533
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
534
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Past Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
535
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
536
|
-
<span class="fd-navigation__text">Past Orders</span>
|
|
537
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
538
|
-
</a>
|
|
539
|
-
</div>
|
|
540
|
-
</li>
|
|
541
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
542
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Lost Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
543
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
544
|
-
<span class="fd-navigation__text">Lost Orders</span>
|
|
545
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
546
|
-
</a>
|
|
547
|
-
</div>
|
|
548
|
-
</li>
|
|
549
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
550
|
-
<div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Forgotten Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
|
|
551
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
552
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
553
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
554
|
-
<span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
|
|
555
|
-
</a>
|
|
556
|
-
</div>
|
|
557
|
-
</li>
|
|
558
|
-
</ul>
|
|
559
|
-
</div>
|
|
415
|
+
<span
|
|
416
|
+
class="fd-navigation__icon sap-icon--attachment"
|
|
417
|
+
role="presentation"
|
|
418
|
+
aria-hidden="true"
|
|
419
|
+
></span>
|
|
420
|
+
<span class="fd-navigation__text">Attachment</span>
|
|
421
|
+
<span
|
|
422
|
+
class="fd-navigation__selection-indicator"
|
|
423
|
+
role="presentation"
|
|
424
|
+
aria-hidden="true"
|
|
425
|
+
aria-label="selection indicator"
|
|
426
|
+
></span>
|
|
427
|
+
</a>
|
|
560
428
|
</div>
|
|
561
429
|
</li>
|
|
562
430
|
|
|
563
431
|
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
564
|
-
<div
|
|
565
|
-
class="fd-navigation__item"
|
|
566
|
-
aria-current="false"
|
|
567
|
-
aria-expanded="false"
|
|
568
|
-
role="menuitem"
|
|
569
|
-
>
|
|
432
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
570
433
|
<a class="fd-navigation__link" role="link" href="#">
|
|
571
|
-
<span
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
<span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
|
|
586
|
-
<span class="fd-navigation__text">Cog</span>
|
|
587
|
-
<span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
|
|
588
|
-
<span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
|
|
589
|
-
</a>
|
|
590
|
-
</li>
|
|
591
|
-
|
|
592
|
-
<li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
|
|
434
|
+
<span
|
|
435
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
436
|
+
role="presentation"
|
|
437
|
+
aria-hidden="true"
|
|
438
|
+
></span>
|
|
439
|
+
<span class="fd-navigation__text">Time</span>
|
|
440
|
+
<span
|
|
441
|
+
class="fd-navigation__selection-indicator"
|
|
442
|
+
role="presentation"
|
|
443
|
+
aria-hidden="true"
|
|
444
|
+
aria-label="selection indicator"
|
|
445
|
+
></span>
|
|
446
|
+
</a>
|
|
447
|
+
</div>
|
|
593
448
|
</li>
|
|
594
449
|
|
|
595
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-
|
|
450
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
596
451
|
<div
|
|
597
|
-
class="fd-navigation__item"
|
|
452
|
+
class="fd-navigation__item fd-popover__control"
|
|
598
453
|
aria-current="false"
|
|
599
454
|
aria-expanded="true"
|
|
455
|
+
aria-selected="true"
|
|
456
|
+
aria-haspopup="tree"
|
|
600
457
|
role="menuitem"
|
|
601
458
|
>
|
|
602
459
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
603
|
-
<span
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
635
|
-
role="menuitem"
|
|
636
|
-
aria-disabled="false"
|
|
637
|
-
aria-posinset="2"
|
|
638
|
-
aria-setsize="3"
|
|
639
|
-
aria-haspopup="menu"
|
|
640
|
-
aria-labelledby="txt-2"
|
|
641
|
-
aria-expanded="true"
|
|
642
|
-
aria-owns="children-menu"
|
|
460
|
+
<span
|
|
461
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
462
|
+
role="presentation"
|
|
463
|
+
aria-hidden="true"
|
|
464
|
+
></span>
|
|
465
|
+
<span class="fd-navigation__text">Basket</span>
|
|
466
|
+
<span
|
|
467
|
+
class="fd-navigation__selection-indicator"
|
|
468
|
+
role="presentation"
|
|
469
|
+
aria-hidden="true"
|
|
470
|
+
aria-label="selection indicator"
|
|
471
|
+
></span>
|
|
472
|
+
<span
|
|
473
|
+
class="fd-navigation__has-children-indicator"
|
|
474
|
+
role="presentation"
|
|
475
|
+
aria-hidden="true"
|
|
476
|
+
aria-label="has children indicator"
|
|
477
|
+
></span>
|
|
478
|
+
</a>
|
|
479
|
+
</div>
|
|
480
|
+
<div
|
|
481
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
482
|
+
aria-hidden="false"
|
|
483
|
+
>
|
|
484
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
485
|
+
<ul
|
|
486
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
487
|
+
role="tree"
|
|
488
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
489
|
+
tabindex="-1"
|
|
490
|
+
aria-hidden="true"
|
|
643
491
|
>
|
|
644
|
-
<
|
|
645
|
-
<
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
aria-hidden="false">
|
|
654
|
-
<div class="fd-navigation__list-wrapper">
|
|
655
|
-
<ul
|
|
656
|
-
class="fd-navigation__list fd-navigation__list--child-items" id="children-menu"
|
|
657
|
-
role="menu"
|
|
658
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
659
|
-
tabindex="-1"
|
|
492
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
493
|
+
<div
|
|
494
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
495
|
+
aria-level="1"
|
|
496
|
+
role="treeitem"
|
|
497
|
+
title="Future Orders"
|
|
498
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
499
|
+
aria-expanded="false"
|
|
500
|
+
aria-selected="false"
|
|
660
501
|
>
|
|
661
|
-
<
|
|
662
|
-
<
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
role="
|
|
666
|
-
aria-
|
|
667
|
-
aria-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
502
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
503
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
504
|
+
<span
|
|
505
|
+
class="fd-navigation__selection-indicator"
|
|
506
|
+
role="presentation"
|
|
507
|
+
aria-hidden="true"
|
|
508
|
+
aria-label="selection indicator"
|
|
509
|
+
></span>
|
|
510
|
+
</a>
|
|
511
|
+
</div>
|
|
512
|
+
</li>
|
|
513
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
514
|
+
<div
|
|
515
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
516
|
+
aria-level="1"
|
|
517
|
+
role="treeitem"
|
|
518
|
+
title="Current Orders"
|
|
519
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
520
|
+
aria-expanded="false"
|
|
521
|
+
aria-selected="true"
|
|
522
|
+
>
|
|
523
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
524
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
525
|
+
<span
|
|
526
|
+
class="fd-navigation__selection-indicator"
|
|
527
|
+
role="presentation"
|
|
528
|
+
aria-hidden="true"
|
|
529
|
+
aria-label="selection indicator"
|
|
530
|
+
></span>
|
|
690
531
|
</a>
|
|
691
532
|
</li>
|
|
692
533
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
693
534
|
<div
|
|
694
|
-
class="fd-navigation__item fd-navigation__item--child
|
|
695
|
-
aria-
|
|
696
|
-
role="
|
|
697
|
-
|
|
698
|
-
aria-
|
|
699
|
-
aria-
|
|
700
|
-
aria-selected="
|
|
535
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
536
|
+
aria-level="1"
|
|
537
|
+
role="treeitem"
|
|
538
|
+
title="Past Orders"
|
|
539
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
540
|
+
aria-expanded="false"
|
|
541
|
+
aria-selected="false"
|
|
701
542
|
>
|
|
702
543
|
<a class="fd-navigation__link" role="link" href="#">
|
|
703
|
-
<span class="fd-navigation__text"
|
|
704
|
-
<span
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
544
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
545
|
+
<span
|
|
546
|
+
class="fd-navigation__selection-indicator"
|
|
547
|
+
role="presentation"
|
|
548
|
+
aria-hidden="true"
|
|
549
|
+
aria-label="selection indicator"
|
|
550
|
+
></span>
|
|
551
|
+
</a>
|
|
552
|
+
</li>
|
|
553
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
554
|
+
<div
|
|
555
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
556
|
+
aria-level="1"
|
|
557
|
+
role="treeitem"
|
|
558
|
+
title="Lost Orders"
|
|
559
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
560
|
+
aria-expanded="false"
|
|
561
|
+
aria-selected="false"
|
|
562
|
+
>
|
|
563
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
564
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
565
|
+
<span
|
|
566
|
+
class="fd-navigation__selection-indicator"
|
|
567
|
+
role="presentation"
|
|
568
|
+
aria-hidden="true"
|
|
569
|
+
aria-label="selection indicator"
|
|
570
|
+
></span>
|
|
571
|
+
</a>
|
|
572
|
+
</li>
|
|
573
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
574
|
+
<div
|
|
575
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
576
|
+
aria-level="1"
|
|
577
|
+
role="treeitem"
|
|
578
|
+
title="Forgotten Orders"
|
|
579
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
580
|
+
aria-expanded="false"
|
|
581
|
+
aria-selected="false"
|
|
582
|
+
>
|
|
583
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
584
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
585
|
+
<span
|
|
586
|
+
class="fd-navigation__selection-indicator"
|
|
587
|
+
role="presentation"
|
|
588
|
+
aria-hidden="true"
|
|
589
|
+
aria-label="selection indicator"
|
|
590
|
+
></span>
|
|
591
|
+
<span
|
|
592
|
+
class="fd-navigation__external-link-indicator"
|
|
593
|
+
role="presentation"
|
|
594
|
+
aria-hidden="true"
|
|
595
|
+
aria-label="external link indicator"
|
|
596
|
+
></span>
|
|
597
|
+
</a>
|
|
598
|
+
</li>
|
|
599
|
+
</ul>
|
|
600
|
+
</li>
|
|
601
|
+
|
|
602
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
603
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
604
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
605
|
+
<span
|
|
606
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
607
|
+
role="presentation"
|
|
608
|
+
aria-hidden="true"
|
|
609
|
+
></span>
|
|
610
|
+
<span class="fd-navigation__text">Shield</span>
|
|
611
|
+
<span
|
|
612
|
+
class="fd-navigation__selection-indicator"
|
|
613
|
+
role="presentation"
|
|
614
|
+
aria-hidden="true"
|
|
615
|
+
aria-label="selection indicator"
|
|
616
|
+
></span>
|
|
617
|
+
</a>
|
|
618
|
+
</div>
|
|
619
|
+
</li>
|
|
620
|
+
|
|
621
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
622
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
623
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
624
|
+
<span
|
|
625
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
626
|
+
role="presentation"
|
|
627
|
+
aria-hidden="true"
|
|
628
|
+
></span>
|
|
629
|
+
<span class="fd-navigation__text">Cog</span>
|
|
630
|
+
<span
|
|
631
|
+
class="fd-navigation__selection-indicator"
|
|
632
|
+
role="presentation"
|
|
633
|
+
aria-hidden="true"
|
|
634
|
+
aria-label="selection indicator"
|
|
635
|
+
></span>
|
|
636
|
+
<span
|
|
637
|
+
class="fd-navigation__has-children-indicator"
|
|
638
|
+
role="presentation"
|
|
639
|
+
aria-hidden="true"
|
|
640
|
+
aria-label="has children indicator, expanded"
|
|
641
|
+
></span>
|
|
642
|
+
</a>
|
|
643
|
+
</div>
|
|
644
|
+
</li>
|
|
645
|
+
|
|
646
|
+
<li
|
|
647
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
648
|
+
role="presentation"
|
|
649
|
+
aria-hidden="true"
|
|
650
|
+
></li>
|
|
651
|
+
|
|
652
|
+
<li
|
|
653
|
+
role="none"
|
|
654
|
+
tabindex="-1"
|
|
655
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
656
|
+
aria-hidden="true"
|
|
657
|
+
>
|
|
658
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
659
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
660
|
+
<span
|
|
661
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
662
|
+
role="presentation"
|
|
663
|
+
aria-hidden="true"
|
|
664
|
+
></span>
|
|
665
|
+
</a>
|
|
666
|
+
</div>
|
|
667
|
+
</li>
|
|
668
|
+
</ul>
|
|
669
|
+
</nav>
|
|
732
670
|
```
|
|
733
671
|
|
|
734
672
|
### Horizontal Navigation - Two-Click Area
|
|
@@ -737,12 +675,7 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
737
675
|
<nav class="fd-navigation fd-navigation--horizontal" aria-label="Horizontal Navigation">
|
|
738
676
|
<div class="fd-navigation__container">
|
|
739
677
|
<ul class="fd-navigation__list" role="menubar" aria-label="Horizontal Navigation">
|
|
740
|
-
<li
|
|
741
|
-
role="none"
|
|
742
|
-
tabindex="-1"
|
|
743
|
-
class="fd-navigation__list-item fd-navigation__list-item--home"
|
|
744
|
-
aria-hidden="true"
|
|
745
|
-
>
|
|
678
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
746
679
|
<div
|
|
747
680
|
class="fd-navigation__item"
|
|
748
681
|
aria-current="page"
|
|
@@ -770,11 +703,11 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
770
703
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
771
704
|
<a class="fd-navigation__link" role="link" href="#">
|
|
772
705
|
<span
|
|
773
|
-
class="fd-navigation__icon sap-icon--
|
|
706
|
+
class="fd-navigation__icon sap-icon--create-entry-time"
|
|
774
707
|
role="presentation"
|
|
775
708
|
aria-hidden="true"
|
|
776
709
|
></span>
|
|
777
|
-
<span class="fd-navigation__text">
|
|
710
|
+
<span class="fd-navigation__text">Time</span>
|
|
778
711
|
<span
|
|
779
712
|
class="fd-navigation__selection-indicator"
|
|
780
713
|
role="presentation"
|
|
@@ -785,15 +718,22 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
785
718
|
</div>
|
|
786
719
|
</li>
|
|
787
720
|
|
|
788
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
789
|
-
<div
|
|
790
|
-
|
|
721
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
722
|
+
<div
|
|
723
|
+
class="fd-navigation__item fd-navigation__item--with-expander fd-popover__control"
|
|
724
|
+
aria-current="false"
|
|
725
|
+
aria-expanded="true"
|
|
726
|
+
aria-haspopup="tree"
|
|
727
|
+
aria-selected="true"
|
|
728
|
+
role="menuitem"
|
|
729
|
+
>
|
|
730
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
791
731
|
<span
|
|
792
|
-
class="fd-navigation__icon sap-icon--
|
|
732
|
+
class="fd-navigation__icon sap-icon--basket"
|
|
793
733
|
role="presentation"
|
|
794
734
|
aria-hidden="true"
|
|
795
735
|
></span>
|
|
796
|
-
<span class="fd-navigation__text">
|
|
736
|
+
<span class="fd-navigation__text">Basket</span>
|
|
797
737
|
<span
|
|
798
738
|
class="fd-navigation__selection-indicator"
|
|
799
739
|
role="presentation"
|
|
@@ -801,62 +741,38 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
801
741
|
aria-label="selection indicator"
|
|
802
742
|
></span>
|
|
803
743
|
</a>
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
744
|
+
<span
|
|
745
|
+
class="fd-navigation__has-children-indicator"
|
|
746
|
+
role="button"
|
|
747
|
+
aria-hidden="true"
|
|
748
|
+
aria-label="Expand/Collapse"
|
|
749
|
+
aria-expanded="true"
|
|
750
|
+
></span>
|
|
751
|
+
</div>
|
|
752
|
+
<div
|
|
753
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
|
|
754
|
+
aria-hidden="false"
|
|
755
|
+
>
|
|
756
|
+
<div class="fd-navigation__list-wrapper fd-popover__wrapper">
|
|
757
|
+
<ul
|
|
758
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
759
|
+
role="tree"
|
|
760
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
761
|
+
tabindex="-1"
|
|
819
762
|
aria-hidden="true"
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
></span>
|
|
834
|
-
<span class="fd-navigation__text">Time</span>
|
|
835
|
-
<span
|
|
836
|
-
class="fd-navigation__selection-indicator"
|
|
837
|
-
role="presentation"
|
|
838
|
-
aria-hidden="true"
|
|
839
|
-
aria-label="selection indicator"
|
|
840
|
-
></span>
|
|
841
|
-
</a>
|
|
842
|
-
</div>
|
|
843
|
-
</li>
|
|
844
|
-
|
|
845
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
846
|
-
<div
|
|
847
|
-
class="fd-navigation__item fd-navigation__item--with-expander fd-popover__control"
|
|
848
|
-
aria-current="false"
|
|
849
|
-
aria-expanded="true"
|
|
850
|
-
aria-haspopup="tree"
|
|
851
|
-
role="menuitem"
|
|
852
|
-
>
|
|
853
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
854
|
-
<span
|
|
855
|
-
class="fd-navigation__icon sap-icon--basket"
|
|
856
|
-
role="presentation"
|
|
857
|
-
aria-hidden="true"
|
|
858
|
-
></span>
|
|
859
|
-
<span class="fd-navigation__text">Basket</span>
|
|
763
|
+
>
|
|
764
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
765
|
+
<div
|
|
766
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
767
|
+
aria-level="1"
|
|
768
|
+
role="treeitem"
|
|
769
|
+
title="Future Orders"
|
|
770
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
771
|
+
aria-expanded="false"
|
|
772
|
+
aria-selected="false"
|
|
773
|
+
>
|
|
774
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
775
|
+
<span class="fd-navigation__text">Future Orders</span>
|
|
860
776
|
<span
|
|
861
777
|
class="fd-navigation__selection-indicator"
|
|
862
778
|
role="presentation"
|
|
@@ -864,79 +780,106 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
864
780
|
aria-label="selection indicator"
|
|
865
781
|
></span>
|
|
866
782
|
</a>
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
783
|
+
</div>
|
|
784
|
+
</li>
|
|
785
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
786
|
+
<div
|
|
787
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
788
|
+
aria-level="1"
|
|
789
|
+
role="treeitem"
|
|
790
|
+
title="Current Orders"
|
|
791
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
792
|
+
aria-expanded="false"
|
|
793
|
+
aria-selected="true"
|
|
794
|
+
>
|
|
795
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
796
|
+
<span class="fd-navigation__text">Current Orders (selected)</span>
|
|
797
|
+
<span
|
|
798
|
+
class="fd-navigation__selection-indicator"
|
|
799
|
+
role="presentation"
|
|
800
|
+
aria-hidden="true"
|
|
801
|
+
aria-label="selection indicator"
|
|
802
|
+
></span>
|
|
803
|
+
</a>
|
|
804
|
+
</li>
|
|
805
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
806
|
+
<div
|
|
807
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
808
|
+
aria-level="1"
|
|
809
|
+
role="treeitem"
|
|
810
|
+
title="Past Orders"
|
|
811
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
812
|
+
aria-expanded="false"
|
|
813
|
+
aria-selected="false"
|
|
814
|
+
>
|
|
815
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
816
|
+
<span class="fd-navigation__text">Past Orders</span>
|
|
817
|
+
<span
|
|
818
|
+
class="fd-navigation__selection-indicator"
|
|
819
|
+
role="presentation"
|
|
820
|
+
aria-hidden="true"
|
|
821
|
+
aria-label="selection indicator"
|
|
822
|
+
></span>
|
|
823
|
+
</a>
|
|
824
|
+
</li>
|
|
825
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
826
|
+
<div
|
|
827
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
828
|
+
aria-level="1"
|
|
829
|
+
role="treeitem"
|
|
830
|
+
title="Lost Orders"
|
|
831
|
+
aria-roledescription="Navigation List Menu Item - Child"
|
|
832
|
+
aria-expanded="false"
|
|
833
|
+
aria-selected="false"
|
|
834
|
+
>
|
|
835
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
836
|
+
<span class="fd-navigation__text">Lost Orders</span>
|
|
837
|
+
<span
|
|
838
|
+
class="fd-navigation__selection-indicator"
|
|
839
|
+
role="presentation"
|
|
840
|
+
aria-hidden="true"
|
|
841
|
+
aria-label="selection indicator"
|
|
842
|
+
></span>
|
|
843
|
+
</a>
|
|
907
844
|
</li>
|
|
908
845
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
909
846
|
<div
|
|
910
847
|
class="fd-navigation__item fd-navigation__item--child"
|
|
911
848
|
aria-level="1"
|
|
912
849
|
role="treeitem"
|
|
913
|
-
title="
|
|
850
|
+
title="Forgotten Orders"
|
|
914
851
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
915
852
|
aria-expanded="false"
|
|
916
|
-
aria-selected="
|
|
853
|
+
aria-selected="false"
|
|
917
854
|
>
|
|
918
855
|
<a class="fd-navigation__link" role="link" href="#">
|
|
919
|
-
<span class="fd-navigation__text">
|
|
856
|
+
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
920
857
|
<span
|
|
921
858
|
class="fd-navigation__selection-indicator"
|
|
922
859
|
role="presentation"
|
|
923
860
|
aria-hidden="true"
|
|
924
861
|
aria-label="selection indicator"
|
|
925
862
|
></span>
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
863
|
+
<span
|
|
864
|
+
class="fd-navigation__external-link-indicator"
|
|
865
|
+
role="presentation"
|
|
866
|
+
aria-hidden="true"
|
|
867
|
+
aria-label="external link indicator"
|
|
868
|
+
></span>
|
|
869
|
+
</a>
|
|
870
|
+
</li>
|
|
871
|
+
</ul>
|
|
872
|
+
</li>
|
|
873
|
+
|
|
874
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
875
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
876
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
877
|
+
<span
|
|
878
|
+
class="fd-navigation__icon sap-icon--shield"
|
|
879
|
+
role="presentation"
|
|
880
|
+
aria-hidden="true"
|
|
881
|
+
></span>
|
|
882
|
+
<span class="fd-navigation__text">Shield</span>
|
|
940
883
|
<span
|
|
941
884
|
class="fd-navigation__selection-indicator"
|
|
942
885
|
role="presentation"
|
|
@@ -944,19 +887,24 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
944
887
|
aria-label="selection indicator"
|
|
945
888
|
></span>
|
|
946
889
|
</a>
|
|
947
|
-
</
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
890
|
+
</div>
|
|
891
|
+
</li>
|
|
892
|
+
|
|
893
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
894
|
+
<div
|
|
895
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
896
|
+
aria-current="false"
|
|
897
|
+
aria-expanded="false"
|
|
898
|
+
aria-selected="false"
|
|
899
|
+
role="menuitem"
|
|
900
|
+
>
|
|
901
|
+
<a class="fd-navigation__link" role="link" href="#">
|
|
902
|
+
<span
|
|
903
|
+
class="fd-navigation__icon sap-icon--action-settings"
|
|
904
|
+
role="presentation"
|
|
905
|
+
aria-hidden="true"
|
|
906
|
+
></span>
|
|
907
|
+
<span class="fd-navigation__text">Cog</span>
|
|
960
908
|
<span
|
|
961
909
|
class="fd-navigation__selection-indicator"
|
|
962
910
|
role="presentation"
|
|
@@ -964,270 +912,38 @@ Horizontal Navigation is an optional alternative to the Vertical Navigation vari
|
|
|
964
912
|
aria-label="selection indicator"
|
|
965
913
|
></span>
|
|
966
914
|
</a>
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
aria-
|
|
972
|
-
|
|
973
|
-
title="Forgotten Orders"
|
|
974
|
-
aria-roledescription="Navigation List Menu Item - Child"
|
|
975
|
-
aria-expanded="false"
|
|
976
|
-
aria-selected="false"
|
|
977
|
-
>
|
|
978
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
979
|
-
<span class="fd-navigation__text">Forgotten Orders (external link)</span>
|
|
980
|
-
<span
|
|
981
|
-
class="fd-navigation__selection-indicator"
|
|
982
|
-
role="presentation"
|
|
983
|
-
aria-hidden="true"
|
|
984
|
-
aria-label="selection indicator"
|
|
985
|
-
></span>
|
|
986
|
-
<span
|
|
987
|
-
class="fd-navigation__external-link-indicator"
|
|
988
|
-
role="presentation"
|
|
989
|
-
aria-hidden="true"
|
|
990
|
-
aria-label="external link indicator"
|
|
991
|
-
></span>
|
|
992
|
-
</a>
|
|
993
|
-
</li>
|
|
994
|
-
</ul>
|
|
915
|
+
<span
|
|
916
|
+
class="fd-navigation__has-children-indicator"
|
|
917
|
+
role="button"
|
|
918
|
+
aria-hidden="true"
|
|
919
|
+
aria-label="Expand/Collapse"
|
|
920
|
+
></span>
|
|
995
921
|
</li>
|
|
996
922
|
|
|
997
|
-
<li
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
923
|
+
<li
|
|
924
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
925
|
+
role="presentation"
|
|
926
|
+
aria-hidden="true"
|
|
927
|
+
></li>
|
|
928
|
+
|
|
929
|
+
<li
|
|
930
|
+
role="none"
|
|
931
|
+
tabindex="-1"
|
|
932
|
+
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
933
|
+
aria-hidden="true"
|
|
934
|
+
>
|
|
935
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
936
|
+
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1006
937
|
<span
|
|
1007
|
-
class="fd-
|
|
938
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
1008
939
|
role="presentation"
|
|
1009
940
|
aria-hidden="true"
|
|
1010
|
-
aria-label="selection indicator"
|
|
1011
941
|
></span>
|
|
1012
942
|
</a>
|
|
1013
943
|
</div>
|
|
1014
944
|
</li>
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
<div
|
|
1018
|
-
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
1019
|
-
aria-current="false"
|
|
1020
|
-
aria-expanded="false"
|
|
1021
|
-
aria-selected="true"
|
|
1022
|
-
role="menuitem"
|
|
1023
|
-
>
|
|
1024
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1025
|
-
<span
|
|
1026
|
-
class="fd-navigation__icon sap-icon--action-settings"
|
|
1027
|
-
role="presentation"
|
|
1028
|
-
aria-hidden="true"
|
|
1029
|
-
></span>
|
|
1030
|
-
<span class="fd-navigation__text">Cog</span>
|
|
1031
|
-
<span
|
|
1032
|
-
class="fd-navigation__selection-indicator"
|
|
1033
|
-
role="presentation"
|
|
1034
|
-
aria-hidden="true"
|
|
1035
|
-
aria-label="selection indicator"
|
|
1036
|
-
></span>
|
|
1037
|
-
</a>
|
|
1038
|
-
<span
|
|
1039
|
-
class="fd-navigation__has-children-indicator"
|
|
1040
|
-
role="button"
|
|
1041
|
-
aria-hidden="true"
|
|
1042
|
-
aria-label="Expand/Collapse"
|
|
1043
|
-
></span>
|
|
1044
|
-
</li>
|
|
1045
|
-
|
|
1046
|
-
<li
|
|
1047
|
-
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
1048
|
-
role="presentation"
|
|
1049
|
-
aria-hidden="true"
|
|
1050
|
-
></li>
|
|
1051
|
-
|
|
1052
|
-
<li
|
|
1053
|
-
role="none"
|
|
1054
|
-
tabindex="-1"
|
|
1055
|
-
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
1056
|
-
aria-hidden="true"
|
|
1057
|
-
>
|
|
1058
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="true" role="menuitem">
|
|
1059
|
-
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
1060
|
-
<span
|
|
1061
|
-
class="fd-navigation__icon sap-icon--overflow"
|
|
1062
|
-
role="presentation"
|
|
1063
|
-
aria-hidden="true"
|
|
1064
|
-
></span>
|
|
1065
|
-
</a>
|
|
1066
|
-
</div>
|
|
1067
|
-
<div
|
|
1068
|
-
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
1069
|
-
aria-hidden="false"
|
|
1070
|
-
id="navMenuOverflow"
|
|
1071
|
-
>
|
|
1072
|
-
<div class="fd-navigation__list-wrapper">
|
|
1073
|
-
<ul
|
|
1074
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
1075
|
-
role="menu"
|
|
1076
|
-
aria-roledescription="Navigation List Tree"
|
|
1077
|
-
tabindex="-1"
|
|
1078
|
-
>
|
|
1079
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1080
|
-
<div
|
|
1081
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1082
|
-
role="menuitem"
|
|
1083
|
-
aria-disabled="false"
|
|
1084
|
-
aria-posinset="1"
|
|
1085
|
-
aria-setsize="3"
|
|
1086
|
-
aria-haspopup="false"
|
|
1087
|
-
aria-labelledby="txt-1"
|
|
1088
|
-
aria-expanded="false"
|
|
1089
|
-
>
|
|
1090
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1091
|
-
<span
|
|
1092
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
1093
|
-
role="presentation"
|
|
1094
|
-
aria-hidden="true"
|
|
1095
|
-
></span>
|
|
1096
|
-
<span class="fd-navigation__text" id="txt-1">Parent Item</span>
|
|
1097
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1098
|
-
</a>
|
|
1099
|
-
</div>
|
|
1100
|
-
</li>
|
|
1101
|
-
|
|
1102
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1103
|
-
<div
|
|
1104
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1105
|
-
role="menuitem"
|
|
1106
|
-
aria-disabled="false"
|
|
1107
|
-
aria-posinset="2"
|
|
1108
|
-
aria-setsize="3"
|
|
1109
|
-
aria-haspopup="menu"
|
|
1110
|
-
aria-labelledby="txt-2"
|
|
1111
|
-
aria-expanded="true"
|
|
1112
|
-
aria-owns="children-menu"
|
|
1113
|
-
>
|
|
1114
|
-
<a
|
|
1115
|
-
class="fd-navigation__link"
|
|
1116
|
-
role="button"
|
|
1117
|
-
tabindex="0"
|
|
1118
|
-
aria-controls="navPopover3"
|
|
1119
|
-
>
|
|
1120
|
-
<span
|
|
1121
|
-
class="fd-navigation__icon sap-icon--horizontal-bar-chart"
|
|
1122
|
-
role="presentation"
|
|
1123
|
-
aria-hidden="true"
|
|
1124
|
-
></span>
|
|
1125
|
-
<span class="fd-navigation__text" id="txt-2">Parent Item</span>
|
|
1126
|
-
<span
|
|
1127
|
-
class="fd-navigation__selection-indicator"
|
|
1128
|
-
role="presentation"
|
|
1129
|
-
aria-hidden="true"
|
|
1130
|
-
aria-label="selection indicator"
|
|
1131
|
-
></span>
|
|
1132
|
-
<span
|
|
1133
|
-
class="fd-navigation__has-children-indicator"
|
|
1134
|
-
role="presentation"
|
|
1135
|
-
aria-hidden="true"
|
|
1136
|
-
aria-label="has children indicator, expanded"
|
|
1137
|
-
></span>
|
|
1138
|
-
</a>
|
|
1139
|
-
<div
|
|
1140
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu"
|
|
1141
|
-
aria-hidden="false"
|
|
1142
|
-
>
|
|
1143
|
-
<div class="fd-navigation__list-wrapper">
|
|
1144
|
-
<ul
|
|
1145
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
1146
|
-
id="children-menu"
|
|
1147
|
-
role="menu"
|
|
1148
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
1149
|
-
tabindex="-1"
|
|
1150
|
-
>
|
|
1151
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1152
|
-
<div
|
|
1153
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1154
|
-
aria-labelledby="txt-child-1"
|
|
1155
|
-
role="menuitem"
|
|
1156
|
-
aria-posinset="1"
|
|
1157
|
-
aria-setsize="3"
|
|
1158
|
-
aria-disabled="false"
|
|
1159
|
-
aria-selected="false"
|
|
1160
|
-
>
|
|
1161
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1162
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
1163
|
-
>Child Item</span
|
|
1164
|
-
>
|
|
1165
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1166
|
-
</a>
|
|
1167
|
-
</div>
|
|
1168
|
-
</li>
|
|
1169
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1170
|
-
<div
|
|
1171
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1172
|
-
aria-labelledby="txt-child-2"
|
|
1173
|
-
role="menuitem"
|
|
1174
|
-
aria-posinset="2"
|
|
1175
|
-
aria-setsize="3"
|
|
1176
|
-
aria-disabled="false"
|
|
1177
|
-
aria-selected="false"
|
|
1178
|
-
>
|
|
1179
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1180
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
1181
|
-
>Child Item</span
|
|
1182
|
-
>
|
|
1183
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1184
|
-
</a>
|
|
1185
|
-
</li>
|
|
1186
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1187
|
-
<div
|
|
1188
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
1189
|
-
aria-labelledby="txt-child-3"
|
|
1190
|
-
role="menuitem"
|
|
1191
|
-
aria-posinset="3"
|
|
1192
|
-
aria-setsize="3"
|
|
1193
|
-
aria-disabled="false"
|
|
1194
|
-
aria-selected="true"
|
|
1195
|
-
>
|
|
1196
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1197
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
1198
|
-
>Child Item</span
|
|
1199
|
-
>
|
|
1200
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1201
|
-
</a>
|
|
1202
|
-
</li>
|
|
1203
|
-
</ul>
|
|
1204
|
-
</li>
|
|
1205
|
-
|
|
1206
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
1207
|
-
<div
|
|
1208
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
1209
|
-
role="menuitem"
|
|
1210
|
-
aria-disabled="false"
|
|
1211
|
-
aria-posinset="3"
|
|
1212
|
-
aria-setsize="3"
|
|
1213
|
-
aria-haspopup="false"
|
|
1214
|
-
aria-labelledby="txt-3"
|
|
1215
|
-
aria-expanded="false"
|
|
1216
|
-
>
|
|
1217
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
1218
|
-
<span
|
|
1219
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
1220
|
-
role="presentation"
|
|
1221
|
-
aria-hidden="true"
|
|
1222
|
-
></span>
|
|
1223
|
-
<span class="fd-navigation__text" id="txt-3">Parent Item</span>
|
|
1224
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
1225
|
-
</a>
|
|
1226
|
-
</li>
|
|
1227
|
-
</ul>
|
|
1228
|
-
</li>
|
|
1229
|
-
</ul>
|
|
1230
|
-
</nav>
|
|
945
|
+
</ul>
|
|
946
|
+
</nav>
|
|
1231
947
|
```
|
|
1232
948
|
|
|
1233
949
|
## Accessibility
|