uui-responsive-container

A responsive container that automatically collapses overflowing children into a dropdown menu.

Installation

npm i @umbraco-ui/uui-responsive-container

Usage

import '@umbraco-ui/uui-responsive-container';

<uui-responsive-container>
  <uui-button>Save</uui-button>
  <uui-button>Edit</uui-button>
  <uui-button>Delete</uui-button>
  <uui-button>Share</uui-button>
</uui-responsive-container>

When there's not enough space, items collapse into a "more" dropdown automatically.

Properties

| Property | Type | Default | Description | | ---------- | -------------------- | ------- | ------------------------------ | | collapse | 'start' | 'end' | 'end' | Which side items collapse from |

collapse="end" (default)

Items collapse from the right side. The "more" button appears on the right.

<uui-responsive-container collapse="end">
  <uui-button>First</uui-button>
  <uui-button>Second</uui-button>
  <uui-button>Third</uui-button>
</uui-responsive-container>

collapse="start"

Items collapse from the left side. The "more" button appears on the left.

<uui-responsive-container collapse="start">
  <uui-button>First</uui-button>
  <uui-button>Second</uui-button>
  <uui-button>Third</uui-button>
</uui-responsive-container>

CSS Custom Properties

| Property | Default | Description | | -------------------------------- | ------- | ----------------- | | --uui-responsive-container-gap | 8px | Gap between items |

Example: Custom Gap

<uui-responsive-container style="--uui-responsive-container-gap: 16px;">
  <uui-button>Save</uui-button>
  <uui-button>Edit</uui-button>
</uui-responsive-container>