Go one step further with our solutions for creating an intuitive, personalized experience.
Navigation is important to ensure a good flow on the main views of your project. Haltura provides an easy component to analyze.
It all starts with the h_navigation class.
<nav class="h_navigation"></nav>
You can then add the logo with h_logo.
<nav class="h_navigation">
<a href="#" class="h_logo">
<img src="..." alt="..."/>
</a>
</nav>
To manage your navigation links, add a h_sections. Then consider groupings of links with h_section.
Finally in each h_section, integrate item links.
<nav class="h_navigation">
<a href="#" class="h_logo">...</a>
<div class="h_sections">
<div class="h_section">
<a href="#" class="item">...</a>
<a href="#" class="item">...</a>
<a href="#" class="item">...</a>
</div>
</div>
</nav>
You can highlight some item by adding the highlight class.
<nav class="h_navigation">
<a href="#" class="h_logo">...</a>
<div class="h_sections">
<div class="h_section">
<a href="#" class="item highlight">...</a>
<a href="#" class="item">...</a>
<a href="#" class="item">...</a>
</div>
</div>
</nav>
You can reorganize the h_sections with the sections_center, sections_between and sections_end classes.
<nav class="h_navigation">
<a href="#" class="h_logo">...</a>
<div class="h_sections sections_between">
<div class="h_section">...</div>
<div class="h_section">...</div>
</div>
</nav>
By adding withdraw--auto, the navigation bar will be removed when scrolling down. Conversely, it will return when scrolling up.
This behavior is very useful in the case of a content focus: the user will enjoy the content without being disturbed.
<nav class="h_navigation withdraw--auto">...</nav>
With withdraw--ghost, the navigation bar will be transparent showing the background before the first scroll of the page.
<nav class="h_navigation withdraw--ghost">...</nav>
To add a sublevel, you will need:
- Add the data-dropitems attribute to an item.
- Create a dropitems component with an id equal to the previous data-dropitems attribute.
...
<div class="h_section">
<a href="#" class="item" data-dropitems="sub_items">item</a>
<div class="dropitems" id="sub_items">
<a href="#" class="item">Sub item</a>
<a href="#" class="item">Sub item</a>
<a href="#" class="item">Sub item</a>
</div>
</div>
...
<nav class="h_navigation">
<a href="#" class="h_logo">My logo</a>
<div class="h_sections sections_between">
<div class="h_section">
<a href="#" class="item" data-dropitems="sub_items">item</a>
<div class="dropitems" id="sub_items">
<a href="#" class="item">Sub item</a>
<a href="#" class="item">Sub item</a>
<a href="#" class="item">Sub item</a>
</div>
</div>
<div class="h_section">
<a href="#" class="item highlight">item highlight</a>
<a href="#" class="item highlight">item highlight</a>
<a href="#" class="item">item</a>
</div>
</div>
</nav>
| Attributes | Definition |
|---|---|
| data-dropitems | Add a sublevel. |
| Class | Definition |
|---|---|
| h_navigation | Create a navigation. |
| h_logo | Logo for navigation. |
| h_sections | Wrapper for h_section. |
| h_section | Add a section. |
| item | Add an item. |
| highlight | Highlight an item. |
| sections_center | justify-content: center. |
| sections_between | justify-content: between. |
| sections_end | justify-content: end. |
| withdraw--auto | Dynamic withdraw navigation. |
| withdraw--ghost | Make navigation transparent before scrolling. |
| dropitems | Sublevel wrapper. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings