Create a navigation bar that can be used for your main site navigation.
Usage
The Navbar component consists of a navbar container, the navbar itself and one or more navigations.
| Element | Description |
|---|---|
gls-navbar |
Add this attribute to a <nav> element to define the Navbar component. |
.gls-navbar-container |
Add this class to the same <nav> element or a parent element to add the navbar background style. |
.gls-navbar-left.gls-navbar-center.gls-navbar-right |
Add one of these classes to a <div> element to align the navigation. |
.gls-navbar-nav |
Add this class to a <ul> element to create the navigation. Use <a> elements as menu items within the list. |
.gls-parent |
Add this class to indicate a parent menu item. |
.gls-active |
Add this class to indicate an active menu item. |
<nav class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-left">
<ul class="gls-navbar-nav">
<li class="gls-active"><a href=""></a></li>
<li class="gls-parent"><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</nav>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav>
Guidelines
When To Use
Navbars are important for a website, they help users jump from one site section to another. Navbars should provide all the categories and functions of the website.
Multiple navigations
You can place more than one navigation inside a navbar container. That way you can have a left aligned, a centered and a right aligned navigation inside the same navbar.
<nav class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-left">...</div>
<div class="gls-navbar-center">...</div>
<div class="gls-navbar-right">...</div>
</nav>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> <div class="gls-navbar-right"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav>
Click mode
A parent item inside the navbar can be enabled by either hovering or clicking the toggle. Just add the mode: click option to the gls-navbar attribute.
<nav class="gls-navbar-container" gls-navbar="mode: click">...</nav>
<nav class="gls-navbar-container gls-margin" gls-navbar="mode: click"> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav>
Transparent modifier
When using an image or colored background for the hero section of your website, you might want to turn the navbar transparent. Just add the .gls-navbar-transparent class to the <nav> element. If necessary, add the .gls-light or .gls-dark class from the Inverse component to adjust the navbar’s color.
<nav class="gls-navbar-container gls-navbar-transparent" gls-navbar>...</nav>
-
<div class="gls-position-relative"> <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt=""> <div class="gls-position-top"> <nav class="gls-navbar-container gls-navbar-transparent" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div> </nav> </div> </div>
Divider modifier
Add the .gls-navbar-nav-divider class to add a vertical line between nav items.
<div class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-left">
<ul class="gls-navbar-nav gls-navbar-nav-divider">...</ul>
</div>
</div>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav gls-navbar-nav-divider"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav>
Subtitle
To define a subtitle, create a <div> element inside an item’s <a> element. Add the .gls-navbar-subtitle class to another <div> element.
<li>
<a href="">
<div>
...
<div class="gls-navbar-subtitle"></div>
</div>
</a>
</li>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"> <a href="#"> <div> Active <div class="gls-navbar-subtitle">Subtitle</div> </div> </a> </li> <li> <a href="#"> <div> Parent <div class="gls-navbar-subtitle">Subtitle</div> </div> </a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#"> <div> Item <div class="gls-navbar-subtitle">Subtitle</div> </div> </a> </li> </ul> </div> </nav>
Content item
You can also add custom content to the navbar, like text, icons, buttons or forms. Add the .gls-navbar-item class to a <div> element that serves as a container for your content
<div class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-left">
<a href="" class="gls-navbar-item gls-logo"></a>
<ul class="gls-navbar-nav">...</ul>
<div class="gls-navbar-item">...</div>
</div>
</div>
Add the .gls-logo class from the Utility component to an <a> or <div> element to indicate your brand.
<nav class="gls-navbar-container gls-margin" gls-navbar> <div class="gls-navbar-left"> <a class="gls-navbar-item gls-logo" href="#">Logo</a> <ul class="gls-navbar-nav"> <li> <a href="#"> <span class="gls-icon gls-margin-small-right" gls-icon="icon: star"></span> Features </a> </li> </ul> <div class="gls-navbar-item"> <div>Some <a href="#">Link</a></div> </div> <div class="gls-navbar-item"> <form action="javascript:void(0)"> <input class="gls-input gls-form-width-small" type="text" placeholder="Input"> <button class="gls-button gls-button-default">Button</button> </form> </div> </div> </nav>
Centered logo
You can create a split menu with a centered logo. Just add the gls-navbar-center-left class to one navbar and the gls-navbar-center-right class to another within the same navbar container. This will keep your logo centered and align the menus to the left and right.
Note An extra div element is required to support IE 11.
<div class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-center">
<div class="gls-navbar-center-left"><div>...</div></div>
<a href="" class="gls-navbar-item gls-logo"></a>
<div class="gls-navbar-center-right"><div>...</div></div>
</div>
</div>
<nav class="gls-navbar-container gls-margin" gls-navbar> <div class="gls-navbar-center"> <div class="gls-navbar-center-left"><div> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div></div> <a class="gls-navbar-item gls-logo" href="#">Logo</a> <div class="gls-navbar-center-right"><div> <ul class="gls-navbar-nav"> <li><a href="#">Item</a></li> </ul> </div></div> </div> </nav>
Toggle item
Add the .gls-navbar-toggle class and the gls-navbar-toggle-icon attribute to an <a> or <div> element to create an icon as a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component or a modal from the Modal component.
<div class="gls-navbar-container" gls-navbar>
<div class="gls-navbar-left">
<a class="gls-navbar-toggle" gls-navbar-toggle-icon href=""></a>
</div>
</div>
<nav class="gls-navbar gls-navbar-container gls-margin"> <div class="gls-navbar-left"> <a class="gls-navbar-toggle" gls-navbar-toggle-icon href="#"></a> </div> </nav> <nav class="gls-navbar gls-navbar-container gls-margin"> <div class="gls-navbar-left"> <a class="gls-navbar-toggle" href="#"> <span gls-navbar-toggle-icon></span> <span class="gls-margin-small-left">Menu</span> </a> </div> </nav>
Dropdowns
A navbar can contain a dropdown from the Dropdown component. Just add the .gls-navbar-dropdown modifier to the dropdown, so it fits perfectly into the navbar’s styling. Add the .gls-navbar-dropdown-nav class to navs inside the dropdown.
<ul class="gls-navbar-nav">
<li>
<a href=""></a>
<div class="gls-navbar-dropdown">
<ul class="gls-nav gls-navbar-dropdown-nav">...</ul>
</div>
</li>
</ul>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> <div class="gls-navbar-right"> <ul class="gls-navbar-nav"> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div> </nav>
Multiple columns
The Dropdown component allows you to arrange the dropdown content in columns. To accommodate up to five columns, you also need to add one of the following classes. Columns will stack, if they no longer fit into the container.
| Class | Description |
|---|---|
.gls-navbar-dropdown-width-2 |
Add this class to double the dropdown’s width. |
.gls-navbar-dropdown-width-3 |
Add this class to triple the dropdown’s width. |
.gls-navbar-dropdown-width-4 |
Add this class to multiply the dropdown’s width by four. |
.gls-navbar-dropdown-width-5 |
Add this class to multiply the dropdown’s width by five. |
<div class="gls-navbar-dropdown gls-navbar-dropdown-width-2">
<div class="gls-navbar-dropdown-grid gls-child-width-1-2" gls-grid>
<div>
<ul class="gls-nav gls-navbar-dropdown-nav">...</ul>
</div>
<div>...</div>
</div>
</div>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li> <a href="#">Two Columns</a> <div class="gls-navbar-dropdown gls-navbar-dropdown-width-2"> <div class="gls-navbar-dropdown-grid gls-child-width-1-2" gls-grid> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> </nav>
Boundary alignment
Dropdowns can be aligned to the navbar’s boundary. Just append the boundary-align: true parameter to the gls-navbar attribute. Add the align: left, align: center or align: right option to change the alignment. By default, dropdowns are aligned to the left.
<nav class="gls-navbar-container" gls-navbar="boundary-align: true; align: center;">...</nav>
<nav class="gls-navbar-container" gls-navbar="boundary-align: true; align: center;"> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown gls-navbar-dropdown-width-2"> <div class="gls-navbar-dropdown-grid gls-child-width-1-2" gls-grid> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown gls-navbar-dropdown-width-3"> <div class="gls-navbar-dropdown-grid gls-child-width-1-3" gls-grid> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> <div class="gls-navbar-right"> <ul class="gls-navbar-nav"> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div> </nav>
Justify
To justify a dropdown, use the Drop component and its position feature. In the following example it is aligned to the boundary of the parent navbar.
<div class="gls-navbar-dropdown" gls-drop="boundary: .parent; boundary-align: true; pos: bottom-justify;">...</div>
<nav class="gls-navbar-container" gls-navbar> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown" gls-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown" gls-drop="boundary: !nav; boundary-align: true; pos: bottom-justify;"> <div class="gls-navbar-dropdown-grid gls-child-width-1-2" gls-grid> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> </nav>
Dropbar
A dropbar extends to the full width of the navbar and displays the dropdown without its default styling. To place dropdowns inside such a dropbar, add the dropbar: true option to the gls-navbar.
<nav class="gls-navbar-container" gls-navbar="dropbar: true;">...</nav>
<div class="gls-navbar-dropbar"></div>
-
<div class="gls-position-relative"> <nav class="gls-navbar-container" gls-navbar="dropbar: true"> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li> <a href="#">Item</a> <div class="gls-navbar-dropdown gls-navbar-dropdown-width-2"> <div class="gls-navbar-dropdown-grid gls-child-width-1-2" gls-grid> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> <div> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </div> </div> </li> </ul> </div> <div class="gls-navbar-right"> <ul class="gls-navbar-nav"> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-header">Header</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li class="gls-nav-divider"></li> <li><a href="#">Item</a></li> </ul> </div> </li> </ul> </div> </nav> <div class="gls-navbar-dropbar"></div> </div>
Sticky Navbar
For a basic sticky navbar, wrap the navbar inside a container with the gls-sticky attribute from the Sticky component.
The navbar itself has a modifier class gls-navbar-sticky that ensures an optimized styling for the sticky state (for example an additional box shadow). To let the sticky component dynamically add and remove that class, set cls-active: gls-navbar-sticky. To ensure that the class is added to the navbar container, set sel-target: .gls-navbar-container.
Note You can view more examples in the tests for the Sticky Navbar.
<div gls-sticky="sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky">
<nav class="gls-navbar-container" gls-navbar>...</nav>
</div>
-
<div gls-sticky="end: #transparent-sticky-navbar; sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky"> <nav class="gls-navbar-container" gls-navbar style="position: relative; z-index: 980;"> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav> </div>
Instead of using a Dropdown, you can show a Dropbar, which means that the subnavigation is displayed in full width below the navbar. Simply set dropbar: true inside the gls-navbar attribute.
<div gls-sticky="sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky">
<nav class="gls-navbar-container" gls-navbar="dropbar: true;">...</nav>
</div>
-
<div gls-sticky="end: #transparent-sticky-navbar; sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky"> <nav class="gls-navbar-container" gls-navbar="dropbar: true;" style="position: relative; z-index: 980;"> <div class="gls-navbar-left"> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </nav> </div>
Transparent Sticky Navbar
When you use a transparent navbar, your markup contains the .gls-navbar-transparent class together with .gls-light or .gls-dark. When the navbar is sticky, it is usually required to remove these classes and add them when the navbar returns to the non-sticky state. To do that, set cls-inactive: gls-navbar-transparent gls-light.
By default, the immediate toggling of classes does not look ideal. Instead, we can set start: 200 to let the navbar disappear and then re-appear when the user has scrolled 200px past the navbar. In that case we can also define to have the navbar slide in with an animation, just set animation: gls-animation-slide-top.
<div gls-sticky="start: 200; animation: gls-animation-slide-top; sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky; cls-inactive: gls-navbar-transparent gls-light">
<nav class="gls-navbar-container" gls-navbar>...</nav>
</div>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="gls-section-primary gls-preserve-color"> <div gls-sticky="start: 200; animation: gls-animation-slide-top; sel-target: .gls-navbar-container; cls-active: gls-navbar-sticky; cls-inactive: gls-navbar-transparent gls-light"> <nav class="gls-navbar-container"> <div class="gls-container gls-container-expand"> <div gls-navbar> <ul class="gls-navbar-nav"> <li class="gls-active"><a href="#">Active</a></li> <li> <a href="#">Parent</a> <div class="gls-navbar-dropdown"> <ul class="gls-nav gls-navbar-dropdown-nav"> <li class="gls-active"><a href="#">Active</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </div> </div> </nav> </div> <div class="gls-section gls-light"> <div class="gls-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p> </div> </div> </div>
Component options
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
| Option | Value | Default | Description |
|---|---|---|---|
align |
String | left |
Dropdown alignment: left, right, center |
mode |
String | click, hover |
Comma separated list of dropdown trigger behavior modes: click, hover |
delay-show |
Number | 0 |
Delay time in hover mode before a dropdown is shown in milliseconds. |
delay-hide |
Number | 800 |
Delay time in hover mode before a dropdown is hidden in milliseconds. |
boundary |
Boolean, String | true |
CSS selector of referenced element to keep the dropdown’s visibility. By default, it’s the navbar component’s element. |
boundary-align |
Boolean | false |
Align the dropdown to the boundary. |
offset |
Number | 0 |
The offset of the dropdown container. |
dropbar |
Boolean | false |
Enable or disable dropbar behavior. |
duration |
Number | 200 |
The dropbar transition duration. |
JavaScript
Learn more about JavaScript components.
Initialization
Gloss.navbar(element, options);
Events
The following events will be triggered on elements with this component attached:
| Name | Description |
|---|---|
beforeshow |
Fires before an item is shown. Can prevent showing by calling preventDefault() on the event. |
show |
Fires after an item is shown. |
shown |
Fires after the item’s show animation has completed. |
beforehide |
Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event. |
hide |
Fires after an item’s hide animation has started. |
hidden |
Fires after an item is hidden. |