Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

edit overflow guidelines #3038

Merged
merged 6 commits into from
Jul 11, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,35 @@
id: Overflow menu
section: components
---
An **overflow menu** groups a set of actions in a responsive horizontal list. Actions can be set to persist or collapse into a kebab as the viewport shrinks. Overflow menus are useful in toolbars or other places where a group of actions are required.

An **overflow menu** groups a set of actions in a responsive horizontal list to help declutter an interface. Actions can be set to persist or collapse into a kebab as the viewpoint shrinks. Overflow menus are useful in toolbars or other places where a group of actions is required.

## Usage
Use an overflow menu when additional options are available to the user but there is a space constraint. Common usage for overflow menu's happen when switching a UI from a desktop to a mobile device.

### When to use
* Use an overflow menu in a table toolbar to group a number of actions and create visual space. Avoid having more than 3 actions fully displayed within a toolbar.


<img src="./img/toolbaroverflow.png" alt="image showing toolbar overflow" width="1765" />

* Use an overflow menu within a table row when additional actions are available that don’t correspond with a column header.

<img src="./img/tableoverflow.png" alt="image showing table with overflow" width="2315" />
* Use an overflow menu within a card component to present additional menu options or provide action links.

<img src="./img/cardoverflow.png" alt="image showing card overflow" width="370" />

### When not to use
* Do not use an overflow menu when there are 2 or fewer actions available to the user.
* Do not use in conjunction with label groups when there isn’t enough space to display each label. Instead, use an [overflow label](https://www.patternfly.org/v4/components/label-group).
* Do not use an overflow menu to hide additional content that you dont want to be seen by default, instead use an [expandable section](https://www.patternfly.org/v4/components/expandable-section/design-guidelines).

## Behavior
Overflow menus are represented by a kebab button, as the user clicks on the kebab, a horizontal list will appear with additional options to click.

## Content Guidelines
* Text should be short and direct so users can quickly scan and decide on an action.
* Text should be written in sentence case.
* Overflow menus should be placed on the right side of the container.