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:

PropTypeDescription
classNamestringAdditional CSS class names
childrenReactNodeContent 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:

PropTypeDescription
classNamestringAdditional CSS class names
childrenReactNodeContent 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

PropTypeDescription
classNamestringAdditional CSS class names
childrenReactNodeContent 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