Vertlist

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.

Description

The main container component that wraps the vertical list elements.

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" class="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

Description

A component for displaying section headers within a vertical list.

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

Description

A component for individual items within a vertical list. Active items can be indicated by adding the active class to the child element.

Usage

import { Vertlist, VertlistHeader, VertlistItem } from "@crafted-ui/react";

<Vertlist>
  <VertlistHeader>Navigation</VertlistHeader>
  <VertlistItem>
    <a href="/home">Home</a>
  </VertlistItem>
  <VertlistItem>
    <a href="/dashboard" class="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

Basic Vertlist

<Vertlist>
  <VertlistItem>
    <a href="/page1">Page 1</a>
  </VertlistItem>
  <VertlistItem>
    <a href="/page2" class="active">Page 2</a>
  </VertlistItem>
  <VertlistItem>
    <a href="/page3">Page 3</a>
  </VertlistItem>
</Vertlist>

Vertlist with Headers

<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

<Vertlist>
  <VertlistHeader>Navigation</VertlistHeader>
  <VertlistItem>
    <a href="/home" class="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" class="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" class="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

<Vertlist>
  <VertlistHeader>Main Categories</VertlistHeader>
  <VertlistItem>
    <a href="/category1">Category 1</a>
  </VertlistItem>
  <VertlistItem>
    <div class="pl-4">
      <Vertlist>
        <VertlistItem>
          <a href="/subcategory1">Subcategory 1</a>
        </VertlistItem>
        <VertlistItem>
          <a href="/subcategory2" class="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>

The Vertlist component follows best practices for accessibility:

• Use meaningful text labels for list items that clearly describe their purpose
• Ensure sufficient color contrast for active and hover states
• When using lists for navigation, provide clear visual indicators for the current page
• Use proper semantic markup for lists (ul/li elements)
• Ensure interactive elements are keyboard navigable and have appropriate focus states

Vertical lists are typically used for navigation, so ensure that the currently active page is clearly indicated both visually and programmatically.