@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,370 lines (1,336 loc) • 85.2 kB
Markdown
---
id: Navigation
section: components
---## Examples
### Default nav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-basic-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-basic-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nav-basic-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nav-basic-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="nav-basic-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nav-basic-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Grouped nav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-grouped-nav-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-grouped-nav-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nav-grouped-nav-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nav-grouped-nav-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="nav-grouped-nav-example-grouped-nav"
aria-label="Global"
>
<section class="pf-v5-c-nav__section" aria-labelledby="grouped-title1">
<h2
class="pf-v5-c-nav__section-title"
id="grouped-title1"
>System panel</h2>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Overview</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Resource usage</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Hypervisors</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Instances</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Volumes</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Networks</a>
</li>
</ul>
</section>
<section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
<h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Policy</h2>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Hosts</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Virtual machines</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Storage</a>
</li>
</ul>
</section>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nav-grouped-nav-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Expandable nav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-expandable-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-expandable-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nav-expandable-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nav-expandable-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="nav-expandable-example-expandable-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
>
<button
class="pf-v5-c-nav__link"
id="nav-expandable-example-expandable-nav-link1"
aria-expanded="true"
>
System panel
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-expandable-example-expandable-nav-link1"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Overview</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Resource usage</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
</li>
<li class="pf-v5-c-divider" role="separator"></li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Instances</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Volumes</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Networks</a>
</li>
</ul>
</section>
</li>
<li class="pf-v5-c-nav__item pf-m-expandable">
<button
class="pf-v5-c-nav__link"
id="nav-expandable-example-expandable-nav-link2"
aria-expanded="false"
>
Policy
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-expandable-example-expandable-nav-link2"
hidden
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
</li>
</ul>
</section>
</li>
<li class="pf-v5-c-nav__item pf-m-expandable">
<button
class="pf-v5-c-nav__link"
id="nav-expandable-example-expandable-nav-link3"
aria-expanded="false"
>
Authentication
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-expandable-example-expandable-nav-link3"
hidden
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
</li>
</ul>
</section>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nav-expandable-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Horizontal nav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-horizontal-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-horizontal-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nav-horizontal-example-masthead">
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nav-horizontal-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__item pf-m-overflow-container"
style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
>
<nav
class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
id="-horizontal-nav"
aria-label="Global"
>
<button
class="pf-v5-c-nav__scroll-button"
disabled
aria-label="Scroll left"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 2</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 3</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 4</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Horizontal nav item 5</a>
</li>
</ul>
<button
class="pf-v5-c-nav__scroll-button"
aria-label="Scroll right"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</nav>
</div>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nav-horizontal-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Horizontal subnav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-horizontal-subnav-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-horizontal-subnav-example"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="nav-horizontal-subnav-example-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-c-button pf-m-plain"
type="button"
aria-label="Global navigation"
>
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</span>
<div class="pf-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="nav-horizontal-subnav-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
>
<div
class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Actions"
>
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="nav-horizontal-subnav-example-expandable-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
>
<button
class="pf-v5-c-nav__link"
id="nav-horizontal-subnav-example-expandable-nav-link1"
aria-expanded="true"
>
System panel
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Overview</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Resource usage</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
</li>
<li class="pf-v5-c-divider" role="separator"></li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Instances</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Volumes</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Networks</a>
</li>
</ul>
</section>
</li>
<li class="pf-v5-c-nav__item pf-m-expandable">
<button
class="pf-v5-c-nav__link"
id="nav-horizontal-subnav-example-expandable-nav-link2"
aria-expanded="false"
>
Policy
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
hidden
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
</li>
</ul>
</section>
</li>
<li class="pf-v5-c-nav__item pf-m-expandable">
<button
class="pf-v5-c-nav__link"
id="nav-horizontal-subnav-example-expandable-nav-link3"
aria-expanded="false"
>
Authentication
<span class="pf-v5-c-nav__toggle">
<span class="pf-v5-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section
class="pf-v5-c-nav__subnav"
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
hidden
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
</li>
</ul>
</section>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-nav-horizontal-subnav-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Horizontal nav with horizontal subnav
```html isFullscreen
<div class="pf-v5-c-page" id="nav-horizontal-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-nav-horizontal-example"
>Skip to content