Skip to documentation

List

A vertical list of selectable rows with icons or avatars, descriptions, trailing extras, hover actions and dividers.

import { List } from '@lobehub/ui/base-ui';
NPMSourceEdit
Navigation

Basic

Loading preview

APIs

List properties
activeKey
null | string | number | bigint
classNames
Partial<Record<ListSemanticName, string>>
compact
boolean

Defaults to false.

defaultActiveKey
string | number | bigint
itemsRequired
ListItem[]
onActiveChange
(key: Key) => void
onClick
(info: ListClickInfo) => void
ref
null | (instance: HTMLUListElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLUListElement | null>

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

selectable
boolean

Defaults to false.

styles
Partial<Record<ListSemanticName, CSSProperties>>
variant
'filled' | 'outlined' | 'borderless'

Defaults to "borderless".

Also accepts all native HTML and ARIA attributes.

Rows render as button, or as lobe-ui A when href is set (router-aware through ConfigProvider aAs). With selectable, clicking a row makes it active; pass activeKey to control it (null for none). The active row gets aria-current. actions appear on hover or focus and never select the row. { type: 'divider' } renders a separator.

Migrating from antd Menu / List

  • antd Menu inline navigation: selectedKeys={[key]} → activeKey={key}; drop mode. Item icon / label / extra / danger / type: 'divider' keep their shape.
  • root @lobehub/ui List: title → label.
  • antd List: map dataSource to items; bordered → variant="outlined".
  • Submenus, groups, horizontal mode and virtual scrolling are not supported.