FOLDER RAIL: Left-hand folder navigation for library-style screens
COMPOSES: Badge (trailing counts) | Font Awesome icons | Menu (shares the active treatment)
PARTS: .tw-folder-rail | -item | -item-main | -item-icon | -chevron | -label | -sub | .tw-active
Use it wherever a screen filters its list by folder — Communications templates and campaigns,
Lists, Helpdesk knowledge articles, Enquiry forms. Rows are real <button> elements:
they filter the list beside them, they do not navigate. The active row's blue edge and tint match
.tw-menu-item.tw-active, so a folder rail and a settings side-nav read as one family.
Anatomy: each row is a full-width button holding a
.tw-folder-rail-item-main group (chevron + icon + truncating label) with an optional
count badge pinned right. Exactly one row carries .tw-active and
aria-current="true" — the folder whose contents are on screen.
Leaf rows keep the chevron and hide it with tw:invisible, so every label sits on the
same left edge as a parent's.
<nav class="tw-folder-rail" aria-label="Template folders">
<button class="tw-folder-rail-item tw-active" type="button" aria-current="true">
<span class="tw-folder-rail-item-main">
<i class="tw-folder-rail-chevron fa-solid fa-chevron-right tw:invisible" aria-hidden="true"></i>
<i class="tw-folder-rail-item-icon fa-regular fa-folder" aria-hidden="true"></i>
<span class="tw-folder-rail-label">All Templates</span>
</span>
<span class="tw-badge tw-badge-sm">48</span>
</button>
</nav>
Collapsing parent: a folder with children is the same row with a visible chevron,
aria-expanded and aria-controls pointing at its
.tw-folder-rail-sub group. The chevron rotates from
aria-expanded="true" — no extra class, no JavaScript-set styles.
One nesting level only: children indent past the parent's icon column, and a deeper tree
belongs in the list body, not the rail.
<button class="tw-folder-rail-item" type="button" aria-expanded="true" aria-controls="folder-rail-admissions-children">…</button><div class="tw-folder-rail-sub" id="folder-rail-admissions-children">…child rows…</div>
Placement: the rail is a fixed-width column beside a
tw:flex-1 tw:min-w-0 body — min-w-0 is required, or a long
template name in the body pushes the rail off screen. Long folder names truncate rather than
wrap, which is what .tw-folder-rail-label is for; the count badge stays pinned right.
14 articles · last updated 4 August 2026
Setting up your first intake
Updated 4 Aug 2026 by Rachel Whitfield
Inviting admissions staff and setting permissions
Updated 28 Jul 2026 by Daniel Osei
Sending your first open day invitation
Updated 21 Jul 2026 by Rachel Whitfield
<div class="tw:w-64 tw:shrink-0"><nav class="tw-folder-rail">…</nav></div>
|
<div class="tw:flex-1 tw:min-w-0">…list…</div>