Pelican Design System
Navbar
Navbar
Navbars allow users to move around digital products.
On this page:
Best Practice
- Navbars contain links to either another page in the digital product or parts of the current page.
- Tailor them to your agency’s needs by changing some aspects of their appearance.
- Do not remove the word “Menu” from the button that expands the navigation .
- If you emphasize a link, make sure it is either the first or last link in the list.
Usage
Navbar Minimal
- Directs users to a single action
- This may be used on a landing page or a single-page website
See the Pen Modal by LA Gov Design Team (@lagovdesignteam) on CodePen.
Navbar Basic
- Presents 3 - 5 links to the user
- Contains one visually-emphasized link
- If you emphasize a link, make sure it is either the first or last link in the list
See the Pen Navbar Minimal by LA Gov Design Team (@lagovdesignteam) on CodePen.
Navbar Icons Links
- Well-suited for pages behind a login of a web application
- Displays an agency logo
- Features a set of links composed of an Icon over text
See the Pen Navbar Basic by LA Gov Design Team (@lagovdesignteam) on CodePen.