x
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
<a href='https://designsystem.digital.gov/components/sidenav/'> See on USWDS</a><div class='grid-row grid-gap'> <div class='tablet:grid-col-4'> <h6 class='usa-heading-alt'> Single level </h6> <nav aria-label='Secondary navigation'> <ul class='usa-sidenav'> <li class='usa-sidenav__item'> <a class="usa-current" href="/lookbook/inspect/uswds_components/sidenav/default">Current page </a></li> <li class='usa-sidenav__item'> <a class="" href="#parent">Parent link </a></li> <li class='usa-sidenav__item'> <a class="" href="#parent">Parent link </a></li> </ul> </nav> </div> <div class='tablet:grid-col-4'> <h6 class='usa-heading-alt'> Two levels </h6> <nav aria-label='Secondary navigation'> <ul class='usa-sidenav'> <li class='usa-sidenav__item'> <a class="" href="#parent">Parent link </a></li> <li class='usa-sidenav__item'> <a class="usa-current" href="/lookbook/inspect/uswds_components/sidenav/default">Current page </a> <ul class='usa-sidenav__sublist'> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="usa-current" href="/lookbook/inspect/uswds_components/sidenav/default">Child link </a></li> </ul> </li> <li class='usa-sidenav__item'> <a class="" href="#parent">Parent link </a></li> </ul> </nav> </div> <div class='tablet:grid-col-4'> <h6 class='usa-heading-alt'> Three levels </h6> <nav aria-label='Secondary navigation'> <ul class='usa-sidenav'> <li class='usa-sidenav__item'> <a class="" href="#parent">Parent link </a></li> <li class='usa-sidenav__item'> <a class="usa-current" href="/lookbook/inspect/uswds_components/sidenav/default">Current page </a> <ul class='usa-sidenav__sublist'> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a> <ul class='usa-sidenav__sublist'> <li class='usa-sidenav__item'> <a class="" href="#grandchild">Grandchild link </a></li> <li class='usa-sidenav__item'> <a class="" href="#grandchild">Grandchild link </a></li> <li class='usa-sidenav__item'> <a class="usa-current" href="/lookbook/inspect/uswds_components/sidenav/default">Grandchild link </a></li> </ul> </li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> <li class='usa-sidenav__item'> <a class="" href="#child">Child link </a></li> </ul> </li> <li class='usa-sidenav__item'> <a class="" href="#child">Parent link </a></li> </ul> </nav> </div></div>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
%a{href: 'https://designsystem.digital.gov/components/sidenav/'} See on USWDS.grid-row.grid-gap .tablet:grid-col-4 %h6.usa-heading-alt Single level = render UswdsComponents::SidenavComponent.new do |nav| - nav.with_item(href: request.path, name: 'Current page') - nav.with_item(href: '#parent', name: 'Parent link') - nav.with_item(href: '#parent', name: 'Parent link') .tablet:grid-col-4 %h6.usa-heading-alt Two levels = render UswdsComponents::SidenavComponent.new do |nav| - nav.with_item(href: '#parent', name: 'Parent link') - nav.with_item(href: request.path, name: 'Current page') do |subnav| - subnav.with_item(href: '#child', name: 'Child link') - subnav.with_item(href: '#child', name: 'Child link') - subnav.with_item(href: '#child', name: 'Child link') - subnav.with_item(href: '#child', name: 'Child link') - subnav.with_item(href: request.path, name: 'Child link') - nav.with_item(href: '#parent', name: 'Parent link') .tablet:grid-col-4 %h6.usa-heading-alt Three levels = render UswdsComponents::SidenavComponent.new do |nav| = nav.with_item(href: '#parent', name: 'Parent link') = nav.with_item(href: request.path, name: 'Current page') do |subnav| = subnav.with_item(href: '#child', name: 'Child link') = subnav.with_item(href: '#child', name: 'Child link') = subnav.with_item(href: '#child', name: 'Child link') do |subsubnav| = subsubnav.with_item(href: '#grandchild', name: 'Grandchild link') = subsubnav.with_item(href: '#grandchild', name: 'Grandchild link') = subsubnav.with_item(href: request.path, name: 'Grandchild link') = subnav.with_item(href: '#child', name: 'Child link') = subnav.with_item(href: '#child', name: 'Child link') = subnav.with_item(href: '#child', name: 'Child link') = nav.with_item(href: '#child', name: 'Parent link')No notes provided.
No params configured.