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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>MENU:</strong> Vertical navigation list with left-border active accent<br> <strong>VARIANTS:</strong> Default | Card-wrapped (.tw-menu-card) | With icons | With header | Disabled item </p> <p class="tw:mb-0 tw:text-sm"> Use for settings sidebars, in-page section navigation, and any vertical list of mutually-exclusive destinations. Items can be <code><button></code> (for tab-style panel switching) or <code><a></code> (for real links). Active state uses a 4px left border, subtle blue background, primary-colour text, and medium font weight. </p> </div> <!-- Section 1: Default (no card) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default (no card)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Plain <code>.tw-menu</code> with no background or border. Use when the menu sits inside another container that already provides chrome. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu" aria-label="Form sections"> <button type="button" class="tw-menu-item">Parent / Carer Details</button> <button type="button" class="tw-menu-item">Student Details</button> <button type="button" class="tw-menu-item tw-active" aria-current="page">Course / Programme Interest</button> <button type="button" class="tw-menu-item">Enquiry / Message</button> <button type="button" class="tw-menu-item">Communication & Consent</button> <button type="button" class="tw-menu-item">Optional / Additional</button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-menu"><button class="tw-menu-item tw-active">...</button></nav></code> </div> </div> <!-- Section 2: Card-wrapped with header --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Card-wrapped with header</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>.tw-menu-card</strong> adds card chrome (white background, rounded corners, subtle border + shadow). Combine with <code>.tw-menu-header</code> for an eyebrow label above the items. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Settings sections"> <div class="tw-menu-header">Settings</div> <a href="#" class="tw-menu-item tw-active" aria-current="page">Basic School Information</a> <a href="#" class="tw-menu-item">Student Year Group Entry Lookup</a> <a href="#" class="tw-menu-item">Regional Settings</a> <a href="#" class="tw-menu-item">Security Settings</a> <a href="#" class="tw-menu-item">Other Settings</a> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-menu tw-menu-card"><div class="tw-menu-header">Settings</div><a class="tw-menu-item tw-active">...</a></nav></code> </div> </div> <!-- Section 3: With leading icons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With leading icons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Add an <code><i class="tw-menu-item-icon"></code> element inside the item. The icon sits in a fixed-width slot (w-4) so labels stay aligned across items. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Communications settings"> <div class="tw-menu-header">Communications</div> <button type="button" class="tw-menu-item tw-active" aria-current="page"> <i class="fa-regular fa-gear tw-menu-item-icon"></i> General </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-shield-check tw-menu-item-icon"></i> Consent & Compliance </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-envelope-open tw-menu-item-icon"></i> Unsubscription & Preferences </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-file-lines tw-menu-item-icon"></i> Template Defaults </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-shield-halved tw-menu-item-icon"></i> Permissions & Safeguards </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-message-lines tw-menu-item-icon"></i> SMS Settings </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-clipboard-list tw-menu-item-icon"></i> Audit </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="tw-menu-item"><i class="fa-regular fa-gear tw-menu-item-icon"></i> General</button></code> </div> </div> <!-- Section 4: Disabled item --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Disabled item</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Add <code>.tw-disabled</code> or <code>aria-disabled="true"</code> to make an item non-interactive. Pointer events are blocked and text is muted. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Example with disabled item"> <a href="#" class="tw-menu-item tw-active" aria-current="page">Overview</a> <a href="#" class="tw-menu-item">Team members</a> <a href="#" class="tw-menu-item tw-disabled" aria-disabled="true" tabindex="-1">Billing (coming soon)</a> <a href="#" class="tw-menu-item">Integrations</a> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a class="tw-menu-item tw-disabled" aria-disabled="true" tabindex="-1">Billing</a></code> </div> </div> <!-- Section 5: Tab-switching usage --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Tab-switching usage</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> The menu is presentation-only — it pairs cleanly with the existing <code>tabs_controller</code> for panel switching. Use <code>role="tablist"</code> on the nav, <code>role="tab"</code> + <code>data-tabs-target="tab"</code> on items, and <code>data-action="click->tabs#select keydown->tabs#keydown"</code>. </p> </div> <div class="tw:flex tw:gap-6 tw:items-start" data-controller="tabs"> <aside class="tw:w-64 tw:shrink-0"> <nav class="tw-menu tw-menu-card" role="tablist" aria-label="Example sections" aria-orientation="vertical"> <div class="tw-menu-header">Sections</div> <button type="button" class="tw-menu-item tw-active" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> Overview </button> <button type="button" class="tw-menu-item" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> Details </button> <button type="button" class="tw-menu-item" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> History </button> </nav> </aside> <section class="tw:flex-1 tw:min-w-0"> <div class="tw-card"> <div class="tw-card-body"> <div role="tabpanel" data-tabs-target="panel"> <h3 class="tw-h4 tw:mb-2">Overview</h3> <p class="tw:mb-0">Overview panel content.</p> </div> <div role="tabpanel" data-tabs-target="panel" hidden> <h3 class="tw-h4 tw:mb-2">Details</h3> <p class="tw:mb-0">Details panel content.</p> </div> <div role="tabpanel" data-tabs-target="panel" hidden> <h3 class="tw-h4 tw:mb-2">History</h3> <p class="tw:mb-0">History panel content.</p> </div> </div> </div> </section> </div> </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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>MENU:</strong> Vertical navigation list with left-border active accent<br> <strong>VARIANTS:</strong> Default | Card-wrapped (.tw-menu-card) | With icons | With header | Disabled item </p> <p class="tw:mb-0 tw:text-sm"> Use for settings sidebars, in-page section navigation, and any vertical list of mutually-exclusive destinations. Items can be <code><button></code> (for tab-style panel switching) or <code><a></code> (for real links). Active state uses a 4px left border, subtle blue background, primary-colour text, and medium font weight. </p> </div> <!-- Section 1: Default (no card) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Default (no card)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Base:</strong> Plain <code>.tw-menu</code> with no background or border. Use when the menu sits inside another container that already provides chrome. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu" aria-label="Form sections"> <button type="button" class="tw-menu-item">Parent / Carer Details</button> <button type="button" class="tw-menu-item">Student Details</button> <button type="button" class="tw-menu-item tw-active" aria-current="page">Course / Programme Interest</button> <button type="button" class="tw-menu-item">Enquiry / Message</button> <button type="button" class="tw-menu-item">Communication & Consent</button> <button type="button" class="tw-menu-item">Optional / Additional</button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-menu"><button class="tw-menu-item tw-active">...</button></nav></code> </div> </div> <!-- Section 2: Card-wrapped with header --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Card-wrapped with header</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>.tw-menu-card</strong> adds card chrome (white background, rounded corners, subtle border + shadow). Combine with <code>.tw-menu-header</code> for an eyebrow label above the items. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Settings sections"> <div class="tw-menu-header">Settings</div> <a href="#" class="tw-menu-item tw-active" aria-current="page">Basic School Information</a> <a href="#" class="tw-menu-item">Student Year Group Entry Lookup</a> <a href="#" class="tw-menu-item">Regional Settings</a> <a href="#" class="tw-menu-item">Security Settings</a> <a href="#" class="tw-menu-item">Other Settings</a> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav class="tw-menu tw-menu-card"><div class="tw-menu-header">Settings</div><a class="tw-menu-item tw-active">...</a></nav></code> </div> </div> <!-- Section 3: With leading icons --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With leading icons</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Add an <code><i class="tw-menu-item-icon"></code> element inside the item. The icon sits in a fixed-width slot (w-4) so labels stay aligned across items. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Communications settings"> <div class="tw-menu-header">Communications</div> <button type="button" class="tw-menu-item tw-active" aria-current="page"> <i class="fa-regular fa-gear tw-menu-item-icon"></i> General </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-shield-check tw-menu-item-icon"></i> Consent & Compliance </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-envelope-open tw-menu-item-icon"></i> Unsubscription & Preferences </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-file-lines tw-menu-item-icon"></i> Template Defaults </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-shield-halved tw-menu-item-icon"></i> Permissions & Safeguards </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-message-lines tw-menu-item-icon"></i> SMS Settings </button> <button type="button" class="tw-menu-item"> <i class="fa-regular fa-clipboard-list tw-menu-item-icon"></i> Audit </button> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button class="tw-menu-item"><i class="fa-regular fa-gear tw-menu-item-icon"></i> General</button></code> </div> </div> <!-- Section 4: Disabled item --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Disabled item</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Add <code>.tw-disabled</code> or <code>aria-disabled="true"</code> to make an item non-interactive. Pointer events are blocked and text is muted. </p> </div> <div class="tw:max-w-xs"> <nav class="tw-menu tw-menu-card" aria-label="Example with disabled item"> <a href="#" class="tw-menu-item tw-active" aria-current="page">Overview</a> <a href="#" class="tw-menu-item">Team members</a> <a href="#" class="tw-menu-item tw-disabled" aria-disabled="true" tabindex="-1">Billing (coming soon)</a> <a href="#" class="tw-menu-item">Integrations</a> </nav> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><a class="tw-menu-item tw-disabled" aria-disabled="true" tabindex="-1">Billing</a></code> </div> </div> <!-- Section 5: Tab-switching usage --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Tab-switching usage</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> The menu is presentation-only — it pairs cleanly with the existing <code>tabs_controller</code> for panel switching. Use <code>role="tablist"</code> on the nav, <code>role="tab"</code> + <code>data-tabs-target="tab"</code> on items, and <code>data-action="click->tabs#select keydown->tabs#keydown"</code>. </p> </div> <div class="tw:flex tw:gap-6 tw:items-start" data-controller="tabs"> <aside class="tw:w-64 tw:shrink-0"> <nav class="tw-menu tw-menu-card" role="tablist" aria-label="Example sections" aria-orientation="vertical"> <div class="tw-menu-header">Sections</div> <button type="button" class="tw-menu-item tw-active" role="tab" aria-selected="true" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> Overview </button> <button type="button" class="tw-menu-item" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> Details </button> <button type="button" class="tw-menu-item" role="tab" aria-selected="false" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"> History </button> </nav> </aside> <section class="tw:flex-1 tw:min-w-0"> <div class="tw-card"> <div class="tw-card-body"> <div role="tabpanel" data-tabs-target="panel"> <h3 class="tw-h4 tw:mb-2">Overview</h3> <p class="tw:mb-0">Overview panel content.</p> </div> <div role="tabpanel" data-tabs-target="panel" hidden> <h3 class="tw-h4 tw:mb-2">Details</h3> <p class="tw:mb-0">Details panel content.</p> </div> <div role="tabpanel" data-tabs-target="panel" hidden> <h3 class="tw-h4 tw:mb-2">History</h3> <p class="tw:mb-0">History panel content.</p> </div> </div> </div> </section> </div> </div></div>No notes provided.
No params configured.