Navigation Bar
View in LexiconA navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.
install | yarn add @clayui/navigation-bar |
---|---|
version | |
use | import NavigationBar from '@clayui/navigation-bar'; |
Table of Contents
You will need to adjust the z-index of
.navbar-collapse
in the collapsed
state if there are multiple
.navbar-collapse-absolute
’s near
each other.Bootstrap 4 doesn’t support Dropdown Menu’s with Popper.js positioning inside
Navbars. They align them manually via CSS classes. See
Dropdown Alignment.
Don’t forget to check WAI-ARIAaccessibility pratices for alerts when writting your markup.
Light
Snippet
<nav className="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light" > <div className="container-fluid container-fluid-max-xl"> <a aria-controls="navigationBarCollapse00" aria-expanded="false" aria-label="Toggle Navigation" className="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" href="#navigationBarCollapse00" role="button" > <span className="navbar-text-truncate">App Section 2</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom"></use> </svg> </a> <div className="collapse navbar-collapse" id="navigationBarCollapse00" style={{zIndex: '505'}} > <div className="container-fluid container-fluid-max-xl"> <ul className="navbar-nav"> <li className="nav-item"> <a className="nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 1</span > </a> </li> <li aria-label="Current Page" className="nav-item"> <a className="active nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 2</span > </a> </li> <li className="nav-item"> <a className="nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 3</span > </a> </li> <li className="dropdown nav-item show-dropdown-on-collapse"> <a aria-expanded="false" aria-haspopup="true" className="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" role="button" > <span className="navbar-text-truncate">More</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom" ></use> </svg> </a> <ul aria-labelledby="" className="dropdown-menu dropdown-menu-width-shrink" > <li> <a className="dropdown-item" href="#1" >App Section 4</a > </li> <li> <a className="dropdown-item" href="#1" >App Section 5</a > </li> </ul> </li> </ul> </div> </div> </div> </nav>
Secondary
Snippet
<nav className="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-secondary" > <div className="container-fluid container-fluid-max-xl"> <a aria-controls="navigationBarCollapse01" aria-expanded="false" aria-label="Toggle Navigation" className="collapsed navbar-toggler navbar-toggler-link" data-toggle="collapse" href="#navigationBarCollapse01" role="button" > <span className="navbar-text-truncate">App Section 2</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom"></use> </svg> </a> <div className="collapse navbar-collapse" id="navigationBarCollapse01" style={{zIndex: '504'}} > <div className="container-fluid container-fluid-max-xl"> <ul className="navbar-nav"> <li className="nav-item"> <a className="nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 1</span > </a> </li> <li aria-label="Current Page" className="nav-item"> <a className="active nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 2</span > </a> </li> <li className="nav-item"> <a className="nav-link" href="#1"> <span className="navbar-text-truncate" >App Section 3</span > </a> </li> <li className="dropdown nav-item show-dropdown-on-collapse"> <a aria-expanded="false" aria-haspopup="true" className="dropdown-toggle nav-link" data-toggle="dropdown" href="#1" role="button" > <span className="navbar-text-truncate">More</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom" ></use> </svg> </a> <ul aria-labelledby="" className="dropdown-menu dropdown-menu-width-shrink" > <li> <a className="dropdown-item" href="#1" >App Section 4</a > </li> <li> <a className="dropdown-item" href="#1" >App Section 5</a > </li> </ul> </li> </ul> </div> </div> </div> </nav>
Using Buttons
Snippet
<nav className="navbar navbar-collapse-absolute navbar-expand-md navbar-underline navigation-bar navigation-bar-light" > <div className="container-fluid container-fluid-max-xl"> <button aria-controls="navigationBarCollapse03" aria-expanded="false" aria-label="Toggle Navigation" className="collapsed navbar-toggler navbar-toggler-link" data-target="#navigationBarCollapse03" data-toggle="collapse" type="button" > <span className="navbar-text-truncate">App Section 2</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom"></use> </svg> </button> <div className="collapse navbar-collapse" id="navigationBarCollapse03" style={{zIndex: '503'}} > <div className="container-fluid container-fluid-max-xl"> <ul className="navbar-nav"> <li className="nav-item"> <button className="btn btn-unstyled nav-link" type="button"> <span className="navbar-text-truncate" >App Section 1</span > </button> </li> <li aria-label="Current Page" className="nav-item"> <button className="active btn btn-unstyled nav-link" type="button" > <span className="navbar-text-truncate" >App Section 2</span > </button> </li> <li className="nav-item"> <button className="btn btn-unstyled nav-link" type="button"> <span className="navbar-text-truncate" >App Section 3</span > </button> </li> <li className="dropdown nav-item show-dropdown-on-collapse"> <button aria-expanded="false" aria-haspopup="true" className="btn btn-unstyled dropdown-toggle nav-link" data-toggle="dropdown" type="button" > <span className="navbar-text-truncate">More</span> <svg className="lexicon-icon lexicon-icon-caret-bottom" focusable="false" role="presentation" > <use href="/icons.svg#caret-bottom" ></use> </svg> </button> <ul aria-labelledby="" className="dropdown-menu dropdown-menu-width-shrink" > <li> <button className="dropdown-item" type="button"> App Section 4 </button> </li> <li> <button className="dropdown-item" type="button"> App Section 5 </button> </li> </ul> </li> </ul> </div> </div> </div> </nav>
Table of Contents