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

Getting Started

Components

Forms

Vertlist

Overview

Vertlist

Description

Usage

Props

VertlistHeader

Description

Usage

Props

VertlistItem

Description

Usage

Props

Examples

Basic Vertlist

Vertlist with Headers

Vertlist with Icons

Nested Vertlists

Styling & Theming

Automatic Theme Adaptation

Accessibility