Vertical Navigation
View in LexiconAn alternative navigation pattern that displays navigation items vertically.
Table of Contents
Menubar Vertical Expand Md
A pattern for collapsing vertical navigations, collapses at 767px. For vertical navigations that don’t collapse use Nav Stacked or Nav Nested.
Snippet
<nav className="menubar menubar-transparent menubar-vertical-expand-md"> <a aria-controls="menubarVerticalMdCollapse01" aria-expanded="false" className="menubar-toggler" data-toggle="collapse" href="#menubarVerticalMdCollapse01" role="button" > <span className="c-inner" tabindex="-1"> Details <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </a> <div className="collapse menubar-collapse" id="menubarVerticalMdCollapse01"> <ul className="nav nav-nested-margins"> <li className="nav-item"> <a aria-controls="menubarVerticalMdNestedCollapse01" aria-expanded="true" className="collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalMdNestedCollapse01" role="button" > <span className="c-inner" tabindex="-1"> Basic Information <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse show" id="menubarVerticalMdNestedCollapse01"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="active nav-link" href="#1" ><span className="c-inner" tabindex="-1">Details</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Categorization</span ></a > </li> <li className="nav-item"> <a aria-controls="menubarVerticalMdNestedCollapse02" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalMdNestedCollapse02" role="button" > <span className="c-inner" tabindex="-1"> Documents and Media <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalMdNestedCollapse02"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Details</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Categorization</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Documents and Media</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Site Template</span ></a > </li> </ul> </div> </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Site Template</span></a > </li> </ul> </div> </li> <li className="nav-item"> <a aria-controls="menubarVerticalMdNestedCollapse03" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalMdNestedCollapse03" role="button" > <span className="c-inner" tabindex="-1"> SEO <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalMdNestedCollapse03"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Sitemap</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Robots</span></a > </li> </ul> </div> </li> <li className="nav-item"> <a aria-controls="menubarVerticalMdNestedCollapse04" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalMdNestedCollapse04" role="button" > <span className="c-inner" tabindex="-1"> Advanced <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalMdNestedCollapse04"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Default User Associations</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Staging</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Analytics</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Maps</span></a > </li> </ul> </div> </li> </ul> </div> </nav>
Menubar Vertical Expand Md with Buttons
Snippet
<nav className="menubar menubar-transparent menubar-vertical-expand-md"> <button aria-controls="menubarVerticalMdButtonsCollapse01" aria-expanded="false" className="menubar-toggler" data-toggle="collapse" data-target="#menubarVerticalMdButtonsCollapse01" role="button" > Details <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </button> <div className="collapse menubar-collapse" id="menubarVerticalMdButtonsCollapse01" > <ul className="nav nav-nested-margins"> <li className="nav-item"> <button aria-controls="menubarVerticalMdNestedCollapseButton01" aria-expanded="true" className="btn btn-unstyled collapse-icon nav-link" data-toggle="collapse" data-target="#menubarVerticalMdNestedCollapseButton01" type="button" > Basic Information <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </button> <div className="collapse show" id="menubarVerticalMdNestedCollapseButton01" > <ul className="nav nav-stacked"> <li className="nav-item"> <a className="active nav-link" href="#1">Details</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Categorization</a> </li> <li className="nav-item"> <button aria-controls="menubarVerticalMdNestedCollapseButton02" aria-expanded="false" className="btn btn-unstyled collapsed collapse-icon nav-link" data-toggle="collapse" data-target="#menubarVerticalMdNestedCollapseButton02" type="button" > Documents and Media <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </button> <div className="collapse" id="menubarVerticalMdNestedCollapseButton02" > <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1">Details</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Categorization</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Documents and Media</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Site Template</a> </li> </ul> </div> </li> <li className="nav-item"> <a className="nav-link" href="#1">Site Template</a> </li> </ul> </div> </li> <li className="nav-item"> <button aria-controls="menubarVerticalMdNestedCollapseButton03" aria-expanded="false" className="btn btn-unstyled collapsed collapse-icon nav-link" data-toggle="collapse" data-target="#menubarVerticalMdNestedCollapseButton03" type="button" > SEO <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </button> <div className="collapse" id="menubarVerticalMdNestedCollapseButton03"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1">Sitemap</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Robots</a> </li> </ul> </div> </li> <li className="nav-item"> <button aria-controls="menubarVerticalMdNestedCollapseButton04" aria-expanded="false" className="btn btn-unstyled collapsed collapse-icon nav-link" data-toggle="collapse" data-target="#menubarVerticalMdNestedCollapseButton04" type="button" > Advanced <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="{{rootPath}}/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="{{rootPath}}/icons.svg#caret-bottom" /> </svg> </span> </button> <div className="collapse" id="menubarVerticalMdNestedCollapseButton04"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1">Default User Associations</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Staging</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Analytics</a> </li> <li className="nav-item"> <a className="nav-link" href="#1">Maps</a> </li> </ul> </div> </li> </ul> </div> </nav>
Menubar Vertical Expand Lg
Collapses at 991px.
Snippet
<nav className="menubar menubar-transparent menubar-vertical-expand-lg"> <a aria-controls="menubarVerticalLgCollapse01" aria-expanded="false" className="menubar-toggler" data-toggle="collapse" href="#menubarVerticalLgCollapse01" role="button" > <span className="c-inner" tabindex="-1"> Details <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </a> <div className="collapse menubar-collapse" id="menubarVerticalLgCollapse01"> <ul className="nav nav-nested-margins"> <li className="nav-item"> <a aria-controls="menubarVerticalLgNestedCollapse01" aria-expanded="true" className="collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalLgNestedCollapse01" role="button" > <span className="c-inner" tabindex="-1"> Basic Information <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse show" id="menubarVerticalLgNestedCollapse01"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="active nav-link" href="#1" ><span className="c-inner" tabindex="-1">Details</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Categorization</span ></a > </li> <li className="nav-item"> <a aria-controls="menubarVerticalLgNestedCollapse02" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalLgNestedCollapse02" role="button" > <span className="c-inner" tabindex="-1"> Documents and Media <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalLgNestedCollapse02"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Details</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Categorization</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Documents and Media</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Site Template</span ></a > </li> </ul> </div> </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Site Template</span></a > </li> </ul> </div> </li> <li className="nav-item"> <a aria-controls="menubarVerticalLgNestedCollapse03" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalLgNestedCollapse03" role="button" > <span className="c-inner" tabindex="-1"> SEO <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalLgNestedCollapse03"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Sitemap</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Robots</span></a > </li> </ul> </div> </li> <li className="nav-item"> <a aria-controls="menubarVerticalLgNestedCollapse04" aria-expanded="false" className="collapsed collapse-icon nav-link" data-toggle="collapse" href="#menubarVerticalLgNestedCollapse04" role="button" > <span className="c-inner" tabindex="-1"> Advanced <span className="collapse-icon-closed"> <svg className="lexicon-icon lexicon-icon-caret-right" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-right" /> </svg> </span> <span className="collapse-icon-open"> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use xlink:href="/icons.svg#caret-bottom" /> </svg> </span> </span> </a> <div className="collapse" id="menubarVerticalLgNestedCollapse04"> <ul className="nav nav-stacked"> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1" >Default User Associations</span ></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Staging</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Analytics</span></a > </li> <li className="nav-item"> <a className="nav-link" href="#1" ><span className="c-inner" tabindex="-1">Maps</span></a > </li> </ul> </div> </li> </ul> </div> </nav>