Vertlist
A vertical list component for navigation and content organization.
Overview
The Vertlist component set provides a vertical list layout commonly used for navigation menus, sidebar content, and content organization. It consists of three components: Vertlist (main container), VertlistHeader (for section titles), and VertlistItem (for individual list items). These components are designed to be used together to create consistent vertical list layouts throughout your application.
Vertlist
Description
The main container component that wraps the vertical list elements. It’s rendered as a <ul>
element with proper styling for vertical layout and spacing.
Usage
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Section Title</VertlistHeader>
<VertlistItem>
<a href="/page1">Page 1</a>
</VertlistItem>
<VertlistItem>
<a href="/page2" className="active">Page 2</a>
</VertlistItem>
<VertlistItem>
<a href="/page3">Page 3</a>
</VertlistItem>
</Vertlist>
Props
The Vertlist
component accepts the following props:
Prop | Type | Description |
---|---|---|
className | string | Additional CSS class names |
children | ReactNode | Content of the vertlist |
Any additional props will be passed to the underlying <ul>
element.
VertlistHeader
Description
A component for displaying section headers within a vertical list. It’s rendered as a <li>
element with proper styling for section headers.
Usage
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Section Title</VertlistHeader>
<VertlistItem>
<a href="/page1">Page 1</a>
</VertlistItem>
<VertlistItem>
<a href="/page2">Page 2</a>
</VertlistItem>
</Vertlist>
Props
The VertlistHeader
component accepts the following props:
Prop | Type | Description |
---|---|---|
className | string | Additional CSS class names |
children | ReactNode | Content of the header item |
Any additional props will be passed to the underlying <li>
element.
VertlistItem
Description
A component for individual items within a vertical list. Active items can be indicated by adding the active
className to the child anchor element. It’s rendered as a <li>
element with proper styling for list items.
Usage
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Navigation</VertlistHeader>
<VertlistItem>
<a href="/home">Home</a>
</VertlistItem>
<VertlistItem>
<a href="/dashboard" className="active">Dashboard</a>
</VertlistItem>
<VertlistItem>
<a href="/settings">Settings</a>
</VertlistItem>
</Vertlist>
Props
Prop | Type | Description |
---|---|---|
className | string | Additional CSS class names |
children | ReactNode | Content of the list item |
Any additional props will be passed to the underlying <li>
element.
Examples
Basic Vertlist
import { Vertlist, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistItem>
<a href="/page1">Page 1</a>
</VertlistItem>
<VertlistItem>
<a href="/page2" className="active">Page 2</a>
</VertlistItem>
<VertlistItem>
<a href="/page3">Page 3</a>
</VertlistItem>
</Vertlist>
Vertlist with Headers
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Main Navigation</VertlistHeader>
<VertlistItem>
<a href="/home">Home</a>
</VertlistItem>
<VertlistItem>
<a href="/about">About</a>
</VertlistItem>
<VertlistItem>
<a href="/contact">Contact</a>
</VertlistItem>
<VertlistHeader>User Settings</VertlistHeader>
<VertlistItem>
<a href="/profile">Profile</a>
</VertlistItem>
<VertlistItem>
<a href="/preferences">Preferences</a>
</VertlistItem>
<VertlistItem>
<a href="/logout">Logout</a>
</VertlistItem>
</Vertlist>
Vertlist with Icons
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Navigation</VertlistHeader>
<VertlistItem>
<a href="/home" className="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<span>Home</span>
</a>
</VertlistItem>
<VertlistItem>
<a href="/settings" className="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"></circle>
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1-2-2 2 2 0 0 1-2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
</svg>
<span>Settings</span>
</a>
</VertlistItem>
<VertlistItem>
<a href="/profile" className="flex items-center gap-2 active">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>Profile</span>
</a>
</VertlistItem>
</Vertlist>
Nested Vertlists
import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";
<Vertlist>
<VertlistHeader>Main Categories</VertlistHeader>
<VertlistItem>
<a href="/category1">Category 1</a>
</VertlistItem>
<VertlistItem>
<div className="pl-4">
<Vertlist>
<VertlistItem>
<a href="/subcategory1">Subcategory 1</a>
</VertlistItem>
<VertlistItem>
<a href="/subcategory2" className="active">Subcategory 2</a>
</VertlistItem>
<VertlistItem>
<a href="/subcategory3">Subcategory 3</a>
</VertlistItem>
</Vertlist>
</div>
</VertlistItem>
<VertlistItem>
<a href="/category2">Category 2</a>
</VertlistItem>
</Vertlist>
Styling & Theming
The Vertlist components adapt to their parent container’s styling through CSS groups. They support different background contexts with special styling for hover and active states. For example, when placed in a container with bg-background
, bg-primary
, or bg-foreground
classes, the hover and active states will automatically adjust to match the parent’s theme.
Automatic Theme Adaptation
// In a default background context
<div className="bg-background">
<Vertlist>
<VertlistHeader>Section Title</VertlistHeader>
<VertlistItem><a href="/page1" className="active">Page 1</a></VertlistItem>
<VertlistItem><a href="/page2">Page 2</a></VertlistItem>
</Vertlist>
</div>
// In a primary background context
<div className="bg-primary text-primary-foreground">
<Vertlist>
<VertlistHeader>Section Title</VertlistHeader>
<VertlistItem><a href="/page1" className="active">Page 1</a></VertlistItem>
<VertlistItem><a href="/page2">Page 2</a></VertlistItem>
</Vertlist>
</div>
Accessibility
The Vertlist component follows best practices for accessibility:
- Uses semantic HTML structure with
<ul>
and<li>
elements - Provides clear visual and interactive states through hover and active styles
- Supports proper keyboard navigation when used with anchor elements
- Uses proper text sizing and contrast for readability
- Active items are clearly indicated both visually and programmatically
For navigation patterns, ensure that you:
- Use meaningful text labels for list items that clearly describe their purpose
- Add
aria-current="page"
to the active link when used for navigation - Ensure adequate focus states for keyboard navigation