Skip to main content

UnorderedList

Overview​

The UnorderedList component renders a styled unordered list (<ul>) element with Bulma helper class integration.

Use it with ListItem components to create bulleted lists with consistent styling.

info

The UnorderedList component is a thin wrapper around the HTML <ul> element, providing consistent Bulma styling and helper class support.

Import​

import { UnorderedList, ListItem } from '@allxsmith/bestax-bulma';

Usage​

Wrap Lists in Content for Traditional Styling

Without a Content wrapper, Bulma renders lists without the traditional margin, padding, and list-style markers (bullets, numbers). Wrap your lists in <Content> to get the expected typographic list appearance.

Default List​

The default usage of the UnorderedList component with ListItem children.

<Content>
  <UnorderedList>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </UnorderedList>
</Content>

Colored List​

Apply text color to all list items at once.

<Content>
  <UnorderedList textColor="primary">
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </UnorderedList>
</Content>

List with Background​

Add a background color and padding for a contained look.

<Content>
  <UnorderedList bgColor="dark" textColor="white" p="6">
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </UnorderedList>
</Content>

Nested Lists​

Create nested lists for hierarchical content.

<Content>
  <UnorderedList>
    <ListItem>First item</ListItem>
    <ListItem>
      Second item with nested list
      <UnorderedList>
        <ListItem>Nested item 1</ListItem>
        <ListItem>Nested item 2</ListItem>
      </UnorderedList>
    </ListItem>
    <ListItem>Third item</ListItem>
  </UnorderedList>
</Content>

Individually Colored Items​

Apply different colors to individual list items.

<Content>
  <UnorderedList>
    <ListItem textColor="primary">Primary item</ListItem>
    <ListItem textColor="success">Success item</ListItem>
    <ListItem textColor="warning">Warning item</ListItem>
    <ListItem textColor="danger">Danger item</ListItem>
  </UnorderedList>
</Content>

Compound (dot-notation) usage​

ListItem is also available as UnorderedList.Item, so a list can be composed from the single UnorderedList import.

<Content>
  <UnorderedList>
    <UnorderedList.Item>First item</UnorderedList.Item>
    <UnorderedList.Item>Second item</UnorderedList.Item>
  </UnorderedList>
</Content>

Accessibility​

  • List Structure: Screen readers announce the list and the number of items, helping users understand the content structure.
  • Semantic Markup: Using proper <ul> and <li> elements ensures accessibility for all users.
  • Nesting: Properly nested lists maintain correct semantics for assistive technologies.
info

Use UnorderedList when the order of items is not significant. For ordered content, use OrderedList.

  • OrderedList: For numbered/ordered lists.
  • ListItem: Individual list item component.
  • Content: For rich typographic content including lists.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color helper.
bgColorBulma color | 'inherit' | 'current'—Background color helper.
childrenReact.ReactNode—List items to render inside the list.
...All standard <ul> attributes and Bulma helper props—See Helper Props

Subcomponents:

  • UnorderedList.Item: The ListItem component renders a styled list item (<li>) element with Bulma helper class integration.