previously Vue Storefront Build Better Storefronts

ListItem

SfListItem is a component that can be used in all sorts of menus. It comes with styles for common data states like disabled and selected.

Examples

ListItem sizes

SfListItem supports 3 sizes that can be set with the size prop: 'sm', 'base', 'lg'.

ListItem slots

SfListItem provides prefix and suffix slots that you can use to add custom content before/after your default content. This can be useful for adding inputs, thumbnails, icons, or any other content to your list items.

ListItem truncate

For items with a lot of text content, you can use Tailwind's truncate class.

Accessibility notes

ListItem component can be rendered as an <li> or <a> or any other tag by providing it with prop tag.

When no tag provided, the component will render as an <li>. To achieve proper accessibility it is important to implement required properties depending on the passed tag.

Playground