ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

List

yarn add @clayui/list

Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.

  • Examples
  • Markup
  • API

Stable3.25.0View in LexiconCHANGELOGstorybook demos

  • QuickActionMenu
  • ClayList children

A list can composable by a Header, an Item and Quick Actions.

  • This is a header

  • Item 1
    ItemField

    Item Title and expanded

    Item Text

    ItemField
  • Item 2

    Item Title and expanded

    Hover this item for action menu

  • This is another header

  • Item 3
    ItemField
Copied!
Code Sample (expand to see it)

QuickActionMenu

Use QuickActionMenu composition inside Item for defining a QuickActionMenu.

Wrap QuickActionMenu.Item inside QuickActionMenu for defining an Item of QuickActionMenu. See the following example:

  • Item 1

    Hover this item for quick action menu

Copied!
Code Sample (expand to see it)

ClayList children

To ensure your html structure is accessible, make sure any children passed to ClayList are li elements. Both ClayList.Item and ClayListHeader are li elements.

How can this be improved? Create an issue!