We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

Skip to content
PatternFly logo

Divider

A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.

Usage

Use a divider as a visual cue to help to convey content separations and groupings.

A vertical divider can be used to separate items within a horizontal list, such as a menu or toolbar.

Example of vertical divider in use to seperate actions

A horizontal divider can be used to separate items within a vertical list, such as a dropdown menu.

Example of horizontal divider in use to options in dropdown menu

A divider can also be used to visually separate content sections, potentially spanning the entire width of the content area.

Example of divider used to seperate a content area into different parts
View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines