ListGroup

The list group component can be used to show a list of items inside of an unordered list. It can be used for navigation, to show a simple aside, to display a list of items in a menu...

Start using the list group component by first importing it from Pol-ui:

import { ListGroup } from "pol-ui";

Default list group

Use the default example to create a simple list of items inside of a menu by using the ListGroup component with ListGroupItem child components inside of it.

Default ListGroup

import { ListGroup } from "pol-ui";
const ListGroupComponent = () => {
  return (
    <ListGroup>
      <ListItem>Profile</ListItem>
      <ListItem>Settings</ListItem>
      <ListItem>Messages</ListItem>
      <ListItem>Download</ListItem>
    </ListGroup>
  );
};
export default ListGroupComponent;

Props

The ListGroup component has the following props:

Prop name	Type	Default	Description
theme	ListGroupTheme		The theme to be applied to the component.

💡

You can also provide any prop comming from the HTML ul tag.

ListItem

Prop name	Type	Default	Description
active	boolean	false	Whether the item is active or not.
disabled	boolean	false	Whether the item is disabled or not.
href	string		The URL to link to.
icon	FC<ComponentProps<'svg'>>		The icon to display next to the item.
onClick	(event) => void		The function to call when the item is clicked.
theme	ListGroupTheme		The theme to be applied to the component.
color	Colors		The color to apply to the item.

💡

You can also provide any prop comming from the HTML a tag as well as the HTML button tag.

Examples

With icons

To display icons next to the items, you can use the ListGroupItem component with the icon prop.

With icons

import { ListGroup } from "pol-ui";
const ListGroupComponent = () => {
  return (
    <ListGroup>
      <ListItem active icon={TbUser}>
        Profile
      </ListItem>
      <ListItem icon={TbSettings}>Settings</ListItem>
      <ListItem icon={TbAt}>Messages</ListItem>
      <ListItem icon={TbDownload}>Download</ListItem>
    </ListGroup>
  );
};
export default ListGroupComponent;

Render children as Links

With the use of the href prop, you can render the children as links.

With links

import { ListGroup } from "pol-ui";
const ListGroupComponent = () => {
  return (
    <ListGroup>
      <ListItem active href="#">
        Profile
      </ListItem>
      <ListItem href="#">Settings</ListItem>
      <ListItem href="#">Messages</ListItem>
      <ListItem href="#">Download</ListItem>
    </ListGroup>
  );
};
export default ListGroupComponent;

Attach actions to items

You can attach actions to the items by using the onClick prop.

With buttons

import { ListGroup } from "pol-ui";
const ListGroupComponent = () => {
  return (
    <ListGroup>
      <ListItem active onClick={() => alert("Profile clicked!")}>
        Profile
      </ListItem>
      <ListItem onClick={() => alert("Settings clicked!")}>Settings</ListItem>
      <ListItem onClick={() => alert("Messages clicked!")}>Messages</ListItem>
      <ListItem onClick={() => alert("Download clicked!")}>Download</ListItem>
    </ListGroup>
  );
};
export default ListGroupComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface ListGroupTheme {
  root: {
    base: string;
  };
  item: {
    base: string;
    link: {
      base: string;
      active: IBoolean;
      disabled: IBoolean;
      href: IBoolean;
      icon: string;
    };
  };
}