@aurodesignsystem-dev/auro-sidenav 0.0.0-pr84.1 → 0.0.0-pr87.0
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/README.md +66 -63
- package/custom-elements.json +505 -1841
- package/demo/api.md +300 -97
- package/demo/auro-sidenavsection.min.js +203 -85
- package/demo/index.md +20 -258
- package/dist/{auro-sidenavsection-C7L7K2Ru.js → auro-sidenavsection-BlshtGvd.js} +133 -17
- package/dist/index.d.ts +329 -262
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +14 -8
package/demo/index.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Sidenav
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
10
|
-
<!-- The below content is automatically added from
|
|
7
|
+
# Sidenav
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
`<auro-sidenav>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that provides users a way to create navigational interfaces on the left-hand side of a page to navigate to separate pages or different sections within the same page.
|
|
12
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
17
|
-
<!-- The below content is automatically added from
|
|
14
|
+
## Use Cases
|
|
15
|
+
|
|
16
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
17
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
18
18
|
The `<auro-sidenav>` element should be used in situations where users may:
|
|
19
19
|
|
|
20
20
|
* create in-page navigation for long content-heavy pages
|
|
@@ -102,15 +102,15 @@ export default function ResponsiveSidenav() {
|
|
|
102
102
|
```
|
|
103
103
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
104
104
|
|
|
105
|
-
##
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
## Example(s)
|
|
106
|
+
|
|
107
|
+
### Basic
|
|
108
108
|
|
|
109
|
-
The following example illustrates a common use case for the
|
|
109
|
+
The following example illustrates a common use case for the sidenav element that includes a navigation header, an accordion sub-nav action, as well as a link that will open to an external URL.
|
|
110
110
|
|
|
111
111
|
<div class="exampleWrapper">
|
|
112
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
113
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
112
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
113
|
+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
114
114
|
<auro-sidenav static>
|
|
115
115
|
<span slot="heading">Pet travel policies</span>
|
|
116
116
|
<auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
|
|
@@ -127,11 +127,11 @@ The following example illustrates a common use case for the `sidenav` element th
|
|
|
127
127
|
</auro-sidenavsection>
|
|
128
128
|
</auro-sidenav>
|
|
129
129
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
130
|
-
</div>
|
|
130
|
+
</div>
|
|
131
131
|
<auro-accordion alignRight>
|
|
132
132
|
<span slot="trigger">See code</span>
|
|
133
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
134
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
|
|
134
|
+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
|
|
135
135
|
|
|
136
136
|
```html
|
|
137
137
|
<auro-sidenav static>
|
|
@@ -151,242 +151,4 @@ The following example illustrates a common use case for the `sidenav` element th
|
|
|
151
151
|
</auro-sidenav>
|
|
152
152
|
```
|
|
153
153
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
154
|
-
</auro-accordion>
|
|
155
|
-
|
|
156
|
-
#### Responsive
|
|
157
|
-
|
|
158
|
-
The following example is a responsive sidenav using the code outlined above to trigger the `static` attribute on window resize.
|
|
159
|
-
|
|
160
|
-
<div class="exampleWrapper">
|
|
161
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/responsive.html) -->
|
|
162
|
-
<!-- The below content is automatically added from ../apiExamples/responsive.html -->
|
|
163
|
-
<auro-sidenav id="collapsible-example">
|
|
164
|
-
<span slot="heading">Responsive Sidenav</span>
|
|
165
|
-
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
166
|
-
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
167
|
-
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
168
|
-
</auro-sidenav>
|
|
169
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
170
|
-
</div>
|
|
171
|
-
<auro-accordion alignRight>
|
|
172
|
-
<span slot="trigger">See code</span>
|
|
173
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/responsive.html) -->
|
|
174
|
-
<!-- The below code snippet is automatically added from ../apiExamples/responsive.html -->
|
|
175
|
-
|
|
176
|
-
```html
|
|
177
|
-
<auro-sidenav id="collapsible-example">
|
|
178
|
-
<span slot="heading">Responsive Sidenav</span>
|
|
179
|
-
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
180
|
-
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
181
|
-
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
182
|
-
</auro-sidenav>
|
|
183
|
-
```
|
|
184
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
185
|
-
</auro-accordion>
|
|
186
|
-
|
|
187
|
-
#### auro-sidenavitem
|
|
188
|
-
|
|
189
|
-
The `<auro-sidenavitem>` element is an [extension](https://lit.dev/docs/components/defining/) of `<auro-hyperlink>` element. All of the [auro-hyperlink API](https://auro.alaskaair.com/components/auro/hyperlink/api) are therefore exposed through the `auro-sidenavitem`.
|
|
190
|
-
|
|
191
|
-
<div class="exampleWrapper">
|
|
192
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hyperlink.html) -->
|
|
193
|
-
<!-- The below content is automatically added from ../apiExamples/hyperlink.html -->
|
|
194
|
-
<auro-sidenav static>
|
|
195
|
-
<span slot="heading">Airlines</span>
|
|
196
|
-
<auro-sidenavitem href="/" target="_blank">Alaska Airlines</auro-sidenavitem>
|
|
197
|
-
<auro-sidenavitem href="https://www.aa.com/" target="_blank">American Airlines</auro-sidenavitem>
|
|
198
|
-
<auro-sidenavitem href="https://www.britishairways.com/" target="_blank">British Airways</auro-sidenavitem>
|
|
199
|
-
<auro-sidenavitem href="https://www.jal.co.jp/" target="_blank">Japan Airlines</auro-sidenavitem>
|
|
200
|
-
</auro-sidenav>
|
|
201
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
202
|
-
</div>
|
|
203
|
-
<auro-accordion alignRight>
|
|
204
|
-
<span slot="trigger">See code</span>
|
|
205
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hyperlink.html) -->
|
|
206
|
-
<!-- The below code snippet is automatically added from ../apiExamples/hyperlink.html -->
|
|
207
|
-
|
|
208
|
-
```html
|
|
209
|
-
<auro-sidenav static>
|
|
210
|
-
<span slot="heading">Airlines</span>
|
|
211
|
-
<auro-sidenavitem href="/" target="_blank">Alaska Airlines</auro-sidenavitem>
|
|
212
|
-
<auro-sidenavitem href="https://www.aa.com/" target="_blank">American Airlines</auro-sidenavitem>
|
|
213
|
-
<auro-sidenavitem href="https://www.britishairways.com/" target="_blank">British Airways</auro-sidenavitem>
|
|
214
|
-
<auro-sidenavitem href="https://www.jal.co.jp/" target="_blank">Japan Airlines</auro-sidenavitem>
|
|
215
|
-
</auro-sidenav>
|
|
216
|
-
```
|
|
217
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
218
|
-
</auro-accordion>
|
|
219
|
-
|
|
220
|
-
#### Selected
|
|
221
|
-
|
|
222
|
-
The `<auro-sidenav>` element supports using the `selected` attribute on `<auro-sidenavitem>` element to designate an item as active.
|
|
223
|
-
|
|
224
|
-
<div class="exampleWrapper">
|
|
225
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/selected.html) -->
|
|
226
|
-
<!-- The below content is automatically added from ../apiExamples/selected.html -->
|
|
227
|
-
<auro-sidenav static>
|
|
228
|
-
<span slot="heading">Favorite In-Flight Meal</span>
|
|
229
|
-
<auro-sidenavitem>Signature Fruit & Cheese Platter</auro-sidenavitem>
|
|
230
|
-
<auro-sidenavitem selected>The Jetsetter's Jam Sandwich</auro-sidenavitem>
|
|
231
|
-
<auro-sidenavitem>Northwest Deli Picnic Pack</auro-sidenavitem>
|
|
232
|
-
<auro-sidenavitem>Mediterranean Tapas Picnic Pack</auro-sidenavitem>
|
|
233
|
-
<auro-sidenavitem>Kid's Choice Picnic Pack</auro-sidenavitem>
|
|
234
|
-
</auro-sidenav>
|
|
235
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
236
|
-
</div>
|
|
237
|
-
<auro-accordion alignRight>
|
|
238
|
-
<span slot="trigger">See code</span>
|
|
239
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/selected.html) -->
|
|
240
|
-
<!-- The below code snippet is automatically added from ../apiExamples/selected.html -->
|
|
241
|
-
|
|
242
|
-
```html
|
|
243
|
-
<auro-sidenav static>
|
|
244
|
-
<span slot="heading">Favorite In-Flight Meal</span>
|
|
245
|
-
<auro-sidenavitem>Signature Fruit & Cheese Platter</auro-sidenavitem>
|
|
246
|
-
<auro-sidenavitem selected>The Jetsetter's Jam Sandwich</auro-sidenavitem>
|
|
247
|
-
<auro-sidenavitem>Northwest Deli Picnic Pack</auro-sidenavitem>
|
|
248
|
-
<auro-sidenavitem>Mediterranean Tapas Picnic Pack</auro-sidenavitem>
|
|
249
|
-
<auro-sidenavitem>Kid's Choice Picnic Pack</auro-sidenavitem>
|
|
250
|
-
</auro-sidenav>
|
|
251
|
-
```
|
|
252
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
253
|
-
</auro-accordion>
|
|
254
|
-
|
|
255
|
-
#### Sections
|
|
256
|
-
|
|
257
|
-
The `<auro-sidenav>` element uses `<auro-sidenavsection>` elements to create sections and layers in the navigation. The `<auro-sidenavsection>` element is an extension of the `<auro-accordion>` element, you will need to supply a `trigger` slot for its children as well as the `<auro-sidenavitem>` elements. The `<auro-sidenav>` element will automatically apply the `chevron` and `fluid` attributes to the `<auro-sidenavsection>` elements.
|
|
258
|
-
|
|
259
|
-
The `<auro-sidenavitem>` elements will automatically be styled as tiered children in the `<auro-sidenav>` element.
|
|
260
|
-
|
|
261
|
-
Please [refer to the auro-accordion documentation](https://auro.alaskaair.com/components/auro/accordion/api) if you wish to use any of its additional attributes or functionality.
|
|
262
|
-
|
|
263
|
-
<div class="exampleWrapper">
|
|
264
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sections.html) -->
|
|
265
|
-
<!-- The below content is automatically added from ../apiExamples/sections.html -->
|
|
266
|
-
<auro-sidenav static>
|
|
267
|
-
<span slot="heading">Helpful links</span>
|
|
268
|
-
<auro-sidenavsection>
|
|
269
|
-
<span slot="trigger">Reservations</span>
|
|
270
|
-
<auro-sidenavitem href="/content/travel-info/accessible-services/airport-accessibility">Is it safe to fly with my pet?</auro-sidenavitem>
|
|
271
|
-
<auro-sidenavitem href="/booking/reservation-lookup">Why are certain breeds prohibited from flying in the cargo compartment?</auro-sidenavitem>
|
|
272
|
-
</auro-sidenavsection>
|
|
273
|
-
<auro-sidenavsection>
|
|
274
|
-
<span slot="trigger">Hotels, cars, and rides</span>
|
|
275
|
-
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/hotels/user/reservations">Hotel reservations</auro-sidenavitem>
|
|
276
|
-
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/car-rental/manage">Car reservations</auro-sidenavitem>
|
|
277
|
-
</auro-sidenavsection>
|
|
278
|
-
<auro-sidenavsection>
|
|
279
|
-
<span slot="trigger">Animals</span>
|
|
280
|
-
<auro-sidenavitem href="/content/travel-info/pets">Booking pet travel</auro-sidenavitem>
|
|
281
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa">Pet travel FAQ</auro-sidenavitem>
|
|
282
|
-
</auro-sidenavsection>
|
|
283
|
-
</auro-sidenav>
|
|
284
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
285
|
-
</div>
|
|
286
|
-
<auro-accordion alignRight>
|
|
287
|
-
<span slot="trigger">See code</span>
|
|
288
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sections.html) -->
|
|
289
|
-
<!-- The below code snippet is automatically added from ../apiExamples/sections.html -->
|
|
290
|
-
|
|
291
|
-
```html
|
|
292
|
-
<auro-sidenav static>
|
|
293
|
-
<span slot="heading">Helpful links</span>
|
|
294
|
-
<auro-sidenavsection>
|
|
295
|
-
<span slot="trigger">Reservations</span>
|
|
296
|
-
<auro-sidenavitem href="/content/travel-info/accessible-services/airport-accessibility">Is it safe to fly with my pet?</auro-sidenavitem>
|
|
297
|
-
<auro-sidenavitem href="/booking/reservation-lookup">Why are certain breeds prohibited from flying in the cargo compartment?</auro-sidenavitem>
|
|
298
|
-
</auro-sidenavsection>
|
|
299
|
-
<auro-sidenavsection>
|
|
300
|
-
<span slot="trigger">Hotels, cars, and rides</span>
|
|
301
|
-
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/hotels/user/reservations">Hotel reservations</auro-sidenavitem>
|
|
302
|
-
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/car-rental/manage">Car reservations</auro-sidenavitem>
|
|
303
|
-
</auro-sidenavsection>
|
|
304
|
-
<auro-sidenavsection>
|
|
305
|
-
<span slot="trigger">Animals</span>
|
|
306
|
-
<auro-sidenavitem href="/content/travel-info/pets">Booking pet travel</auro-sidenavitem>
|
|
307
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa">Pet travel FAQ</auro-sidenavitem>
|
|
308
|
-
</auro-sidenavsection>
|
|
309
|
-
</auro-sidenav>
|
|
310
|
-
```
|
|
311
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
312
|
-
</auro-accordion>
|
|
313
|
-
|
|
314
|
-
#### Mobile experience header
|
|
315
|
-
|
|
316
|
-
The `<auro-sidenav>` element uses the attribute `static` to toggle on/off accordion functionality with the navigation header. This can be both static and dynamic. Refer to the [default](#default) example for how to change this value dynamically based on a specific media query design token.
|
|
317
|
-
|
|
318
|
-
<div class="exampleWrapper">
|
|
319
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/isToggle.html) -->
|
|
320
|
-
<!-- The below content is automatically added from ../apiExamples/isToggle.html -->
|
|
321
|
-
<auro-sidenav>
|
|
322
|
-
<span slot="heading">Collapsible side navigation (click to toggle)</span>
|
|
323
|
-
<auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
|
|
324
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-cabin">Pets in cabin</auro-sidenavitem>
|
|
325
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
|
|
326
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
|
|
327
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
|
|
328
|
-
</auro-sidenav>
|
|
329
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
330
|
-
</div>
|
|
331
|
-
<auro-accordion alignRight>
|
|
332
|
-
<span slot="trigger">See code</span>
|
|
333
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/isToggle.html) -->
|
|
334
|
-
<!-- The below code snippet is automatically added from ../apiExamples/isToggle.html -->
|
|
335
|
-
|
|
336
|
-
```html
|
|
337
|
-
<auro-sidenav>
|
|
338
|
-
<span slot="heading">Collapsible side navigation (click to toggle)</span>
|
|
339
|
-
<auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
|
|
340
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-cabin">Pets in cabin</auro-sidenavitem>
|
|
341
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
|
|
342
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
|
|
343
|
-
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
|
|
344
|
-
</auro-sidenav>
|
|
345
|
-
```
|
|
346
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
347
|
-
</auro-accordion>
|
|
348
|
-
|
|
349
|
-
## Recommended Use and Version Control
|
|
350
|
-
|
|
351
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `<auro-sidenav>` custom element is defined automatically.
|
|
352
|
-
|
|
353
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `register(name)` method in our `AuroSideNav` related components and pass in a unique name.
|
|
354
|
-
|
|
355
|
-
```js
|
|
356
|
-
import { AuroSideNav, AuroSideNavItem, AuroSideNavSection } from '@aurodesignsystem/auro-sidenav/class';
|
|
357
|
-
|
|
358
|
-
AuroSideNav.register('custom-sidenav');
|
|
359
|
-
AuroSideNavItem.register('custom-sidenavitem');
|
|
360
|
-
AuroSideNavSection.register('custom-sidenavsection');
|
|
361
|
-
```
|
|
362
|
-
|
|
363
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-sidenav>` element.
|
|
364
|
-
|
|
365
|
-
Using the `registerComponent` function to create a custom `<auro-sidenav>` will also create a custom `<auro-sidenavitem>` and `<auro-sidenavsection>` with the exact same naming convention. For example, using `registerComponent('custom-sidenav')` will result in `<custom-sidenavitem>` and `<custom-sidenavsection>` also being created.
|
|
366
|
-
|
|
367
|
-
<div class="exampleWrapper">
|
|
368
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
369
|
-
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
370
|
-
<custom-sidenav static>
|
|
371
|
-
<span slot="heading">Alaska Airlines History</span>
|
|
372
|
-
<custom-sidenavitem href="/content/about-us/history">Historical overview</custom-sidenavitem>
|
|
373
|
-
<custom-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</custom-sidenavitem>
|
|
374
|
-
<custom-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</custom-sidenavitem>
|
|
375
|
-
</custom-sidenav>
|
|
376
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
377
|
-
</div>
|
|
378
|
-
<auro-accordion alignRight>
|
|
379
|
-
<span slot="trigger">See code</span>
|
|
380
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
381
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
382
|
-
|
|
383
|
-
```html
|
|
384
|
-
<custom-sidenav static>
|
|
385
|
-
<span slot="heading">Alaska Airlines History</span>
|
|
386
|
-
<custom-sidenavitem href="/content/about-us/history">Historical overview</custom-sidenavitem>
|
|
387
|
-
<custom-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</custom-sidenavitem>
|
|
388
|
-
<custom-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</custom-sidenavitem>
|
|
389
|
-
</custom-sidenav>
|
|
390
|
-
```
|
|
391
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
392
154
|
</auro-accordion>
|