> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/20.listitem.md). # List Item ### ListItem Props | Name | Type | Default | Description | | ------------------------------------- | ----------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | after | string | | Content of the list item "after" area | | chevron | boolean | undefined | Enables chevron icon if list item is link. Overwrites `chevronIos` and `chevronMaterial` | | chevronIcon | string | | Allows to replace default chevron icon with custom one | | chevronIos | boolean | true | Enables chevron icon if list item is link in iOS theme | | chevronMaterial | boolean | true | Enables chevron icon if list item is link in Material theme | | colors | object | | Object with Tailwind CSS colors classes | | colors.activeBgIos | string | 'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10' | | | colors.activeBgMaterial | string | '' | | | colors.groupTitleBgIos | string | 'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant' | | | colors.groupTitleBgMaterial | string | 'bg-md-light-surface-2 dark:bg-md-dark-surface-2' | | | colors.groupTitleContactsBgIos | string | 'dark:bg-\[#323234]' | | | colors.groupTitleContactsBgMaterial | string | 'bg-transparent dark:bg-transparent' | | | colors.groupTitleContactsTextMaterial | string | 'text-md-light-primary dark:text-md-dark-primary' | | | colors.groupTitleСontactsTextIos | string | 'text-opacity-90 dark:text-opacity-90' | | | colors.menuListItemActiveBgIos | string | 'bg-primary bg-opacity-15 dark:bg-primary' | | | colors.menuListItemActiveBgMaterial | string | 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container' | | | colors.menuListItemActiveTextIos | string | 'text-primary dark:text-white' | | | colors.menuListItemActiveTextMaterial | string | 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' | | | colors.menuListItemBgIos | string | 'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10' | | | colors.menuListItemBgMaterial | string | 'bg-md-light-surface-1 dark:bg-md-dark-surface-1' | | | colors.menuListItemTextIos | string | 'text-black dark:text-white' | | | colors.menuListItemTextMaterial | string | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' | | | colors.primaryTextIos | string | 'text-black dark:text-white' | | | colors.primaryTextMaterial | string | 'text-md-light-on-surface dark:text-md-dark-on-surface' | | | colors.secondaryTextIos | string | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' | | | colors.secondaryTextMaterial | string | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' | | | colors.touchRipple | string | 'touch-ripple-black dark:touch-ripple-white' | | | component | string | 'li' | Component's HTML Element | | contacts | boolean | undefined | Enables Contacts List by adding required additional classes for styling | | contentClass | string | | Additional class to add on item "content" element | | dividers | boolean | undefined | Renders dividers (borders) between list items. If not specified then inherits `dividers` prop value from parent List component | | footer | string | | Content of the list item "footer" area | | groupTitle | boolean | false | Renders it as a list group title | | header | string | | Content of the list item "header" area | | href | string \| boolean | | List item link's `href` attribute | | innerClass | string | | Additional class to add on item "inner" element | | label | boolean | false | Renders item content as `` element. Useful to create radio/checkbox list items | | link | boolean | false | Renders list item as link (``) | | linkComponent | string | 'a' | List item link HTML Element | | linkProps | any | | Object with additional props (attributes) to pass to the Link/Button | | mediaClass | string | | Additional class to add on item "media" element | | menuListItem | boolean | | Renders list item as menu list item (same as ``) | | menuListItemActive | boolean | false | Makes menu list item highlighted (active) (same as ``) | | strongTitle | boolean \| 'auto' | | Makes item title strong (bold). When `'auto'` it will make it strong if there is also `subtitle` or `text` specified | | subtitle | string | | Content of the list item "subtitle" area | | target | string | | List item link's `target` attribute | | text | string | | Content of the list item "text" area | | title | string | | Content of the list item "title" area | | titleFontSizeIos | string | 'text-\[17px]' | Tailwind CSS class for item title font size in iOS theme | | titleFontSizeMaterial | string | 'text-\[16px]' | Tailwind CSS class for item title font size in Material theme | | titleWrapClass | string | | Additional class to add on item "titleWrap" element | | touchRipple | boolean | true | Enables touch ripple effect in Material theme | ### ListItem Slots | Name | Description | | -------- | ---------------------------------------- | | after | Content of the list item "after" area | | content | Content of the item-content | | footer | Content of the list item "footer" area | | header | Content of the list item "header" area | | inner | Content of the item-inner | | media | Content of the list item "media" area | | subtitle | Content of the list item "subtitle" area | | text | Content of the list item "text" area | | title | Content of the list item "title" area | ### Examples {% tabs %} {% tab title="Vue" %} ```typescript ``` {% endtab %} {% tab title="React" %} ```js import React from 'react'; import { Page, Navbar, NavbarBackLink, Badge, Block, BlockTitle, List, ListGroup, ListItem, } from 'ina-ui/react'; import DemoIcon from '../components/DemoIcon'; export default function ListPage() { return ( Simple List Strong List Strong Outline List Strong Inset List Strong Outline Inset List Simple Links List Data list, with icons } title="Ivan Petrov" after="CEO" /> } after={5} /> } title="Jenna Smith" /> Links } link title="Ivan Petrov" after="CEO" /> } link title="John Doe" after="Cleaner" /> } link title="Jenna Smith" /> Links, Header, Footer } link header="Name" title="John Doe" after="Edit" /> } link header="Phone" title="+7 90 111-22-3344" after="Edit" /> } /> } /> Links, no icons Grouped with sticky titles Media Lists

Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, user, etc.

Songs } /> } /> } /> Mail App ); } ``` {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/20.listitem.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.