Skip to main content

List Item

List Item is a base element that arranges content in compact rows, such as navigation links, project actions, or account details.

Import

import { ListItem } from '@vortexlabs/vortex';
import type { ListItemProps } from '@vortexlabs/vortex';

Allied components

InteractiveSelectDropdown Menu

Other links

Storybook
Quick Start
<ListItem
  href="/docs/quick-start"
  size="md"
>
  Quick Start
</ListItem>

Features

  • Can render navigation links or action buttons.
  • Supports sm and md sizes with responsive values.
  • Can contain icons or custom content on either side of the label.
  • Supports disabled and highlighted states.
  • Supports custom rendering for router links.

Navigation

Set href to render a link. Set openInNewTab with href to open it in a new tab.

Introduction
Quick Start
All Components
import { ListItem, Stack } from "@vortexlabs/vortex";

<Stack>
  <ListItem href="/docs/introduction">Introduction</ListItem>
  <ListItem href="/docs/quick-start">Quick Start</ListItem>
  <ListItem href="/docs/all-components">All Components</ListItem>
</Stack>

Sizes

Set size to a value or breakpoint object to adjust the label, icons, and spacing. The default is md.

Small row
Medium row
Responsive row
<Stack gap={2}>
  <ListItem href="/docs/quick-start" size="sm">Small row</ListItem>
  <ListItem href="/docs/quick-start" size="md">Medium row</ListItem>
  <ListItem href="/docs/quick-start" size={{ xs: "sm", md: "md" }}>Responsive row</ListItem>
</Stack>

Icons

Set startIcon or endIcon to add an icon beside the label.

Introduction
Quick Start
All Components
import { ArrowRight, Folder } from "@vortexlabs/vortex-icons";

<Stack gap={2}>
  <ListItem href="/docs/introduction" startIcon={<Folder />}>Introduction</ListItem>
  <ListItem href="/docs/quick-start" endIcon={<ArrowRight />}>Quick Start</ListItem>
  <ListItem href="/docs/all-components" startIcon={<Folder />} endIcon={<ArrowRight />}>All Components</ListItem>
</Stack>

Custom Slots

Set startSlot to add content before the label; startIcon replaces it. Set endSlot to add content after the label and endIcon.

Quick Start
G S
AL
Alex Lee

Owner

import { Avatar, Badge, ListItem, Shortcut, Stack } from "@vortexlabs/vortex";

<Stack gap={2}>
  <ListItem href="/docs/quick-start" endSlot={<Shortcut>G S</Shortcut>}>Quick Start</ListItem>
  <ListItem startSlot={<Avatar initials="AL" size="xs" />} endSlot={<Badge size="sm">Owner</Badge>}>
    Alex Lee
  </ListItem>
</Stack>

States

Set highlighted to keep the hover background visible. Set disabled to prevent activation and remove the link destination.

Quick Start
All Components — unavailable
<Stack gap={2}>
  <ListItem href="/docs/quick-start" highlighted attributes={{ "aria-current": "page" }}>
    Quick Start
  </ListItem>
  <ListItem href="/docs/all-components" disabled>All Components — unavailable</ListItem>
</Stack>

Actions

Set onClick without href to render a button for an action.

Project active
"use client";

import React from "react";
import { ListItem, Stack, Text } from "@vortexlabs/vortex";

export const ListItemAction = () => {
  const [archived, setArchived] = React.useState(false);

  return (
    <Stack gap={2}>
      <ListItem onClick={() => setArchived(!archived)}>
        {archived ? "Restore project" : "Archive project"}
      </ListItem>
      <Text size="body-sm-desktop" color="subtle" attributes={{ role: "status" }}>
        {archived ? "Project archived" : "Project active"}
      </Text>
    </Stack>
  );
};

Custom Rendering

Set render to integrate a router link. Forward the supplied attributes, including ref and children.

Quick Start
"use client";

import NextLink from "next/link";
import { ListItem } from "@vortexlabs/vortex";

export const RouterListItem = () => {
  return (
    <ListItem
      href="/docs/quick-start"
      render={(attributes) => <NextLink {...attributes} href="/docs/quick-start" />}
    >
      Quick Start
    </ListItem>
  );
};

Accessibility

Key
Description
Enter
Follow a focused row that has an href.
EnterSpace
Activate a focused action button.
Provide a descriptive label in children for links and actions.
Set attributes={{ "aria-current": "page" }} for the current page; highlighted only changes appearance.