Vertical header
Activates a vertical sidebar navigation on wide screens and hamburger navigation on small screens.
Vertical header orc-c-header orc-c-header--vertical
Activates a vertical sidebar navigation on wide screens and hamburger navigation on small screens.
-
<header class="orc-c-header orc-c-header--light orc-c-header--vertical orc-js-header"> <div class="orc-c-header__inner"> <a class="orc-c-logo orc-c-logo--purple" href="/patterns/04-pages-00-homepage/04-pages-00-homepage.rendered.html"> <svg class="orc-c-logo__img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283 56.5" aria-labelledby="the-cosmopolitan"><defs><style>.cosmopolitan-logo-1{isolation:isolate;}.cosmopolitan-logo-3{fill:#dbd9d6;}.cosmopolitan-logo-4,.cosmopolitan-logo-5{mix-blend-mode:multiply;}.cosmopolitan-logo-5{fill:#b3b2b1;}.cosmopolitan-logo-6{fill:#8c189b;}</style></defs><title id="the-cosmopolitan">The Cosmopolitan of Las Vegas</title><g id="Layer_1" class="cosmopolitan-logo-1"><circle class="cosmopolitan-logo" cx="28.25" cy="28.25" r="28.25"/><path class="cosmopolitan-logo-3" d="M28.25 36.58a8.32 8.32 0 1 1 7.85-11.1h20.27a28.24 28.24 0 1 0 0 5.56h-20.27a8.33 8.33 0 0 1-7.85 5.54z"/><path class="cosmopolitan-logo-5" d="M42.95 52.29a21.36 21.36 0 0 1-11.83 3c-13.49 0-23.72-9-23.72-27.08s10.22-27.04 23.71-27.04c7.4 0 12.07 1.93 17.62 7.84l-5.32 4.99c-4.03-4.45-7.18-6-12.3-6s-9.57 2-12.4 6c-2.5 3.44-3.48 7.53-3.48 14.19s1 10.75 3.48 14.19c2.83 4 7.18 6 12.4 6s8.31-1.64 12.33-6l5.39 5.2a27.09 27.09 0 0 1-5.88 4.71z"/><path class="cosmopolitan-logo-6" d="M43.43 14.66a5.8 5.8 0 0 1-1.51 4.16 5.12 5.12 0 0 1-3.92 1.59q-5.72 0-5.71-5a8.47 8.47 0 0 1 .7-3 8.06 8.06 0 0 0 .7-2.5 4.56 4.56 0 0 0-1.52-3.51 5.46 5.46 0 0 0-3.83-1.4c-6.54 0-10.69 7.17-10.69 21.59 0 8.23 2.33 14.13 5.2 17.68a10.24 10.24 0 0 0 8.2 4c3.38 0 6.62-1.65 10.14-6 .31-.41.45-.59.9-1.16.31.25 1.32 1.19 1.54 1.42a27.69 27.69 0 0 1-4.08 4.5 20.26 20.26 0 0 1-13.9 5.37 22.51 22.51 0 0 1-16.55-6.8 22.72 22.72 0 0 1-6.84-16.67 24.52 24.52 0 0 1 7.22-17.93 24.05 24.05 0 0 1 17.79-7.31 19.9 19.9 0 0 1 11.47 3.19q4.7 3.2 4.69 7.78z"/><path class="cosmopolitan-logo-2" d="M277.33 20.38v3.85h-.45v-3.85h-1.23v-.38h2.92v.41zm5.22 3.85v-3.23l-1.17 2.56h-.38l-1.19-2.56v3.23h-.45v-4.23h.45l1.39 3 1.35-3h.45v4.26zM136.62 45.31a1.6 1.6 0 0 1 1.63 1.77 3.5 3.5 0 0 1-3.1 3.54 1.62 1.62 0 0 1-1.68-1.76 3.51 3.51 0 0 1 3.15-3.55zm-1.35 4.69c1.21 0 2-2.12 2-3 0-.55-.18-1.11-.84-1.11-1.2 0-2 2.11-2 3 .02.56.18 1.11.84 1.11zm7.6-6.79a2.07 2.07 0 0 0-2 1.86c-.07.3-.49 1.69-.49 1.69s-.2.18-.49.31-.39.19-.39.32a.13.13 0 0 0 .14.14h.51l-1.15 3.95c-.11.38-.29.46-.39.46-.39 0-.51-.3-.81-.3a.5.5 0 0 0-.53.46c0 .47.46.57.68.57a2.58 2.58 0 0 0 2.26-2l.9-3.07h1.1l.33-.67h-1.23l.74-2.55c.1-.32.22-.44.48-.44.43 0 .09.57.65.57a.61.61 0 0 0 .61-.63c.02-.33-.31-.65-.92-.65zm5 8.18v-8h1.22v6.91h3.85v1.09zm11.92 0l-.55-1.6h-3.16l-.55 1.6h-1.3l2.93-8h1l2.93 8zm-2.1-6.19l-1.25 3.54h2.46zm7.19 6.26a3.63 3.63 0 0 1-2.88-1.04l.81-.8a2.63 2.63 0 0 0 2 .77c1 0 1.65-.45 1.65-1.23a1.1 1.1 0 0 0-.31-.84 1.41 1.41 0 0 0-.88-.33l-.95-.14a2.7 2.7 0 0 1-1.52-.64 2 2 0 0 1-.59-1.53 2.36 2.36 0 0 1 2.79-2.33 3.35 3.35 0 0 1 2.49.91l-.78.76a2.33 2.33 0 0 0-1.74-.61c-.94 0-1.46.53-1.46 1.24a1 1 0 0 0 .3.74 1.81 1.81 0 0 0 .9.37l.91.14a2.61 2.61 0 0 1 1.49.59 2.11 2.11 0 0 1 .65 1.64c-.01 1.47-1.21 2.35-2.89 2.35zm11.25-.07h-.95l-2.63-8h1.26l1.84 5.82 1.84-5.82h1.28zm4.34 0v-8h5.11v1.11h-3.89v2.34h3.31v1.07h-3.32v2.41h3.89v1.09zm11.88-.84a3.07 3.07 0 0 1-4.3.06c-.79-.79-.78-1.68-.78-3.21s0-2.43.78-3.22a2.87 2.87 0 0 1 2.1-.85 2.81 2.81 0 0 1 2.85 2.5h-1.22a1.64 1.64 0 0 0-1.69-1.4 1.59 1.59 0 0 0-1.18.49c-.39.42-.48.88-.48 2.48s.09 2.06.48 2.5a1.61 1.61 0 0 0 1.18.48 1.69 1.69 0 0 0 1.31-.57 1.82 1.82 0 0 0 .4-1.25v-.45h-1.71v-1h2.92v1.22a3 3 0 0 1-.67 2.24zm7.35.84l-.55-1.6h-3.15l-.54 1.6h-1.29l2.93-8h1l2.93 8zm-2.1-6.19l-1.25 3.54h2.46zm7.08 6.26a3.62 3.62 0 0 1-2.83-1.06l.81-.8a2.62 2.62 0 0 0 2 .77c1 0 1.65-.45 1.65-1.23a1.07 1.07 0 0 0-.32-.84 1.36 1.36 0 0 0-.87-.33l-.94-.14a2.67 2.67 0 0 1-1.51-.64 2 2 0 0 1-.58-1.53 2.36 2.36 0 0 1 2.67-2.34 3.34 3.34 0 0 1 2.49.91l-.78.76a2.32 2.32 0 0 0-1.74-.61c-.94 0-1.46.53-1.46 1.24a1 1 0 0 0 .3.74 1.8 1.8 0 0 0 .9.37l.91.14a2.58 2.58 0 0 1 1.49.59 2.07 2.07 0 0 1 .66 1.64c.02 1.5-1.19 2.38-2.86 2.38zM73.19 21.46v14.15h-1.69v-14.15h-4.22v-1.46h10.13v1.49zm15.9 14.14v-7.13h-6.53v7.14h-1.68v-15.61h1.69v7h6.53v-7h1.69v15.61zm6.09 0v-15.6h8.82v1.49h-7.13v5.51h6.06v1.49h-6.06v5.65h7.13v1.49zm24.13.14a5.7 5.7 0 0 1-4.05-1.63c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.7 5.7 0 0 1 4.05-1.63 5.32 5.32 0 0 1 5.48 4.66h-1.73a3.73 3.73 0 0 0-3.76-3.17 3.84 3.84 0 0 0-2.73 1.1c-1 1-1.11 2.09-1.11 5.36s.11 4.35 1.11 5.36a3.83 3.83 0 0 0 2.73 1.1 3.77 3.77 0 0 0 3.8-3.17h1.69a5.31 5.31 0 0 1-5.47 4.66zm18.2-1.63a5.84 5.84 0 0 1-8.09 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.84 5.84 0 0 1 8.09 0c1.49 1.47 1.49 3 1.49 6.32s0 4.86-1.48 6.32zm-1.31-11.66a3.9 3.9 0 0 0-5.47 0c-1 1-1.11 2.06-1.11 5.34s.12 4.33 1.11 5.34a3.9 3.9 0 0 0 5.47 0c1-1 1.11-2.07 1.11-5.34s-.11-4.32-1.1-5.34zm10.8 13.29a6.92 6.92 0 0 1-5.41-2.07l1.15-1.14a5.46 5.46 0 0 0 4.31 1.72c2.32 0 3.73-1.08 3.73-2.9a2.51 2.51 0 0 0-.76-2 3.36 3.36 0 0 0-2.06-.74l-1.84-.29a5.76 5.76 0 0 1-2.92-1.19 3.67 3.67 0 0 1-1.2-2.88c0-2.66 1.94-4.42 5.07-4.42a6.4 6.4 0 0 1 4.7 1.72l-1.09 1.07a5 5 0 0 0-3.7-1.34c-2.11 0-3.32 1.16-3.32 2.9a2.25 2.25 0 0 0 .71 1.8 4.66 4.66 0 0 0 2.13.86l1.73.26a5.11 5.11 0 0 1 2.88 1.1 3.88 3.88 0 0 1 1.34 3.1c.06 2.7-2.11 4.44-5.45 4.44zm20.88-.14v-11.87l-4.34 9.42h-1.44l-4.4-9.42v11.88h-1.7v-15.61h1.69l5.16 11.09 5-11.09h1.68v15.61zm15.24-1.49a5.85 5.85 0 0 1-8.1 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.85 5.85 0 0 1 8.1 0c1.49 1.47 1.49 3 1.49 6.32s.04 4.86-1.45 6.32zm-1.32-11.66a3.8 3.8 0 0 0-2.73-1.12 3.89 3.89 0 0 0-2.74 1.12c-1 1-1.1 2.06-1.1 5.34s.11 4.33 1.1 5.34a3.88 3.88 0 0 0 2.74 1.12 3.8 3.8 0 0 0 2.73-1.12c1-1 1.12-2.07 1.12-5.34s-.08-4.32-1.08-5.34zm12.67 6.73h-4.2v6.43h-1.69v-15.61h5.89c2.89 0 4.89 1.78 4.89 4.59s-1.96 4.59-4.85 4.59zm-.15-7.71h-4v6.22h4c2 0 3.35-1.05 3.35-3.12s-1.34-3.11-3.31-3.11zm17.23 12.65a5.83 5.83 0 0 1-8.09 0c-1.49-1.47-1.49-3-1.49-6.32s0-4.86 1.49-6.32a5.83 5.83 0 0 1 8.09 0c1.49 1.47 1.49 3 1.49 6.32s.04 4.85-1.45 6.31zm-1.31-11.66a3.89 3.89 0 0 0-5.46 0c-1 1-1.1 2.06-1.1 5.34s.1 4.33 1.1 5.34a3.89 3.89 0 0 0 5.46 0c1-1 1.11-2.07 1.11-5.34s-.06-4.33-1.07-5.35zm6.78 13.15v-15.61h1.7v14.11h8.08v1.49zm12.73 0v-15.61h1.7v15.61zm10.95-14.15v14.15h-1.7v-14.15h-4.58v-1.46h10.85v1.49zm15.42 14.14l-1.26-3.53h-6.91l-1.27 3.53h-1.8l5.82-15.6h1.43l5.8 15.63zm-4.68-13.24l-3 8.25h5.91zm19.13 13.24l-8.4-12.53v12.54h-1.69v-15.61h1.6l8.4 12.5v-12.5h1.69v15.61z"/></g></svg> </a> <!--end orc-c-logo--> <a href="#main" class="orc-c-btn orc-u-is-vishidden"> <div class="orc-c-btn__inner"> <span class="orc-c-btn__text orc-js-btn-text">Skip To Content</span> </div> <!--end orc-c-btn__inner--> </a> <!-- end orc-c-btn --> <button class="orc-c-btn orc-c-btn--small orc-c-header__nav-btn orc-js-nav-trigger" data-btn-icon-swap="../../orchid-icons.svg"> <div class="orc-c-btn__inner"> <span class="orc-c-btn__text orc-js-btn-text">Menu</span> <svg class="orc-c-btn__icon orc-js-btn-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#chevron-down"></use> </svg> <svg class="orc-c-btn__icon orc-u-is-hidden orc-js-btn-swap-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../orchid-icons.svg#x"></use> </svg> </div><!--end orc-c-btn__inner--> </button> <!-- end orc-c-btn --> <div class="orc-c-nav-container orc-js-nav-target"> <nav class="orc-c-tree-nav" role="navigation"> <ul class="orc-c-tree-nav__list"> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Getting Started</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__link-text">Guidelines</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <!--end orc-c-tree-nav__link--> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Overview</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Design Principles</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Code conventions</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Accessibility</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Data display</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Data entry</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Data validation</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Input modes</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Navigation</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Notifications</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Writing</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Browser support</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__link-text">Styles</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <!--end orc-c-tree-nav__link--> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Overview</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Design tokens</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Color</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Typography</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Iconography</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Imagery</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Motion</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink "> <span class="orc-c-tree-nav__sublink-text">Voice and tone</span> </a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__link-text">Components</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <!--end orc-c-tree-nav__link--> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Blocks and cards</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Buttons</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Charts and graphs</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Form controls</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Headers and footers</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Imagery</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Icons</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Interactive panels</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Lists and collections</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Media</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Messaging</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Navigation</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Tables</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger"> <span class="orc-c-tree-nav__sublink-text">Text</span> <svg class="orc-c-icon orc-c-tree-nav__icon"> <use xlink:href="../../orchid-icons.svg#chevron-right"></use> </svg> </a> <ul class="orc-c-tree-nav__sublist orc-js-tree-nav-dropdown"> <li class="orc-c-tree-nav__subitem"> <a href="#" class="orc-c-tree-nav__sublink orc-js-tree-nav-dropdown-trigger">Overview</a> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__sublist__item --> </ul> <!-- end orc-c-tree-nav__sublist --> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Utilities</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Page templates</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Downloads</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Support</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> <li class="orc-c-tree-nav__item "> <a href="#" href="#" class="orc-c-tree-nav__link "> <span class="orc-c-tree-nav__link-text">Contribute</span> </a> <!--end orc-c-tree-nav__link--> </li> <!-- end orc-c-tree-nav__list__item --> </ul> <!-- end orc-c-tree-nav__list --> </nav> <!-- end orc-c-tree-nav --> </div> <!-- end orc-c-nav-container --> </div> <!--end orc-c-header__inner--> <form method="GET" action="#" class="orc-c-form orc-u-is-vishidden orc-js-form" data-logout-form> <input type="hidden" name="_method" value="GET"> <input type="hidden" name="_token" value=""> <div class="orc-c-form__body"> <div class="orc-c-form__list"> </div> <!--end orc-c-form__list--> </div> <!--end orc-c-form__body--> <div class="orc-c-form__footer"> </div> <!--end orc-c-form__footer--> </form> <!--end orc-c-form--> </header> <!--end orc-c-header-->
Usage
When to use
This header is the better choice for app-like experiences,as opposed to the traditional header, which is a better choice for marketing sites. Use the vertical header by default when there are 10+ items in the primary navigation.
When to consider an alternative
For experiences that are more marketing-focused, use the traditional header instead.
| Class Name | Description |
|---|---|
|
Apply to the header’s containing HTML element. This class adds the general styling for the section that contains the navigation and branding elements. |
|
Add to |
|
Add to |
|
Apply to the inner |
|
The branding image of the site. See the logo for more information about classes used in this component. |
|
Apply to |
|
Class applied to the vertically stacked navigation that is used within a vertical header. This is placed within the |