Skip to content
PatternFly
Release 6.6.1
Learn
About us
Get started
Design
Develop
Training
HTML
React
Releases
Overview
Release highlights
Upgrade guide
Design and develop
Components
Overview
About modal
Accordion
Action list
Alert
Avatar
Back to top
Backdrop
Background image
Badge
Banner
Brand
Breadcrumb
Button
Card
Charts
Overview
Colors for charts
Area chart
Bar chart
Box plot chart
Bullet chart
Donut chart
Donut utilization chart
Legends
Line chart
Beta
Patterns
Pie chart
Resize observer
Sankey chart
Beta
Scatter chart
Skeletons
Sparkline chart
Stack chart
Threshold chart
Tooltips
Chip
Deprecated
Clipboard copy
Code block
Code editor
Compass
Beta
Content
Data list
Date and time
Calendar month
Date and time picker
Demo
Date picker
Time picker
Description list
Divider
Drag and drop
Drawer
Dual list selector
Empty state
Expandable section
File upload
Multiple file upload
Simple file upload
Forms
Checkbox
Form
Form control
Form select
Radio
Text area
Text input
Helper text
Hero
Beta
Hint
Icon
Inline edit
Input group
Jump links
Label
List
Login page
Masthead
Menus
Application launcher
Demo
Context selector
Demo
Custom menus
Demo
Dropdown
Menu
Menu toggle
Options menu
Demo
Select
Modal
Navigation
Notification badge
Notification drawer
Number input
Overflow menu
Page
Pagination
Panel
Password generator
Demo
Password strength
Demo
Popover
Progress
Progress stepper
Search input
Sidebar
Simple list
Skeleton
Skip to content
Slider
Spinner
Switch
Table
Tabs
Text input group
Tile
Deprecated
Timestamp
Title
Toggle group
Toolbar
Tooltip
Tree view
Truncate
Wizard
Patterns
Overview
Actions
Bulk selection
Card view
Demo
Component usage and behavior
Dashboard
Demo
Filters
Demo
Password generator
Demo
Password strength
Demo
Primary-detail
Demo
Right-to-left
Demo
Status and severity
Extensions
Overview
Catalog view
Overview
Catalog item header
Catalog tile
Filter side panel
Properties side panel
Vertical tabs
ChatBot
Overview
UI
Messages
Analytics
Customizing messages
Component groups
Overview
Ansible
Bulk select
Close button
Column management modal
Deck
Error boundary
Error state
External link button
Field Builder
List manager
Log snippet
Maintenance
Missing page
Multi-content card
Page header
Responsive actions
Service card
Severity
Shortcut grid
Skeleton table
Stale data warning
Status
Beta
Tag count
Unauthorized access
Unavailable content
Warning modal
Data view
Overview
Toolbar
Table
Log viewer
Quick starts
React console
Topology
Overview
Custom nodes
Custom edges
Anchors
Selection
Pan and zoom
Context menu
Drag and drop
Control bar
Toolbar
Sidebar
Layouts
Pipelines
User feedback
Foundations and styles
Overview
Colors
Design tokens
Overview
All design tokens
Design
Develop
Iconography
Layouts
Overview
Bullseye
Flex
Gallery
Grid
Level
Split
Stack
Motion
Spacers
Theming
Typography
Utility classes
Overview
Accessibility
Alignment
Background color
Box shadow
Display
Flex
Float
Sizing
Spacing
Text
Accessibility
Overview
Design
Develop
Product scorecard
Test your product
AI
Overview
AI assisted development
Marketplace
AI-assisted code migration
PatternFly CLI
PatternFly MCP
Rapid prototyping
Guidelines
AI design principles
Legal requirements
Transparency notices
Iconography
Color
Chatbot avatars
Animation
Conversation design
Content design
Overview
Accessibility and localization
Best practices
Brand voice and tone
Grammar
Capitalization
Numerics
Punctuation
Sentence structure
Terminology
Truncation
Units and symbols
Writing guides
CLI handbook
Error messages
PatternFly design guidelines
Product tours
Tooltips
Developer guides
Open UI Automation
React Flow
Right-to-left handbook
Connect
Get help
FAQs
Contact us
Report a bug
Get involved
Community
Contribute
Contribute code
Contribute designs
Contribute documentation
Primary-detail
Demo
React demos
HTML demos
Design guidelines
Table of contents
Demos
Primary-detail expanded
Primary-detail collapsed
Primary-detail card view expanded
Inline modifier
Documentation
Demos
Primary-detail expanded
HTML
Primary-detail collapsed
HTML
Primary-detail card view expanded
HTML
Inline modifier
HTML
Documentation
This demo implements the drawer in context of the page component.
Edit this page on GitHub
Back to top
Give feedback
Copyright © 2014-2026 Red Hat, Inc.
Privacy statement
Terms of use
All policies and guidelines
