Learn about Navigation

Discover the secrets of effective navigation design. Read tutorials on menu design, breadcrumb trails, and site maps, to help users find what they need quickly.
Read more
Read less
All content
Courses
Tutorials

All Navigation content:

  1. How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

    How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

    Tutorial • Intermediate

    Let’s build a sticky header whose top part (a notification bar) will disappear on scroll down, and reappear when the user scrolls back up.

  2. How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

    How to Hide/Reveal a Sticky Header on Scroll (With JavaScript)

    Tutorial • Intermediate

    In this tutorial we’ll learn how to hide the page header when scrolling down the page, then reveal it when scrolling up. As a bonus, we’ll also make the...

  3. How to Preserve the Menu State on Page Load (Using Local Storage)

    How to Preserve the Menu State on Page Load (Using Local Storage)

    Tutorial • Intermediate

    In this tutorial, we’ll create a simple static site with Tailwind CSS and then learn how to preserve its menu state on page load. Ready for another challenge?

  4. How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

    How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

    Tutorial • Intermediate

    Today I’ll show you how to convert Bootstrap pills (tabs) into a dropdown. Most importantly we’ll keep both these components in sync. We’ll use pills for the...

  5. What are Breadcrumbs in WordPress?

    What are Breadcrumbs in WordPress?

    Tutorial • Beginner

    In this tutorial I’m going to explain all you need to know to get started using breadcrumbs in WordPress.

  6. How to Make the Bootstrap Navbar Dropdown Work on Hover

    How to Make the Bootstrap Navbar Dropdown Work on Hover

    Tutorial • Beginner

    in this short tutorial we’ll build a typical Bootstrap navbar with a quick solution for showing its dropdowns on hover.

  7. How to Build a Custom Mega Menu with Flexbox

    How to Build a Custom Mega Menu with Flexbox

    Tutorial • Intermediate

    Creating an information-rich mega menu is not an easy task but flexbox offers a great solution. You can leverage its content-aware nature to make your mega...

  8. Build an Advanced Responsive Menu Inspired by Netflix

    Build an Advanced Responsive Menu Inspired by Netflix

    Tutorial • Intermediate

    In today’s tutorial we’ll take inspiration from the Neflix Jobs website and learn to build an advanced responsive navigation menu with a cool transition effect.

  9. Dropdown Navigation: How to Maintain the Selected Option On WordPress

    Dropdown Navigation: How to Maintain the Selected Option On WordPress

    Tutorial • Intermediate

    In a previous tutorial, we learned how to use a select element for navigation and maintain the selected option on page load. Today, we’ll go one step further...

  10. Quick Tip: BEM Naming and WordPress Filters for Navigation

    Quick Tip: BEM Naming and WordPress Filters for Navigation

    Tutorial • Intermediate

    In this quick tip we’ll look at how to use the BEM (Block Element Modifier) naming methodology in WordPress.

  11. 5 Ways to Supercharge Website Navigation

    5 Ways to Supercharge Website Navigation

    Tutorial • Beginner

    Having a simple and intuitive navigation is key to your website’s success. Here are some simple solutions that can help you take things to the next level.

  12. Practical CSS: Build a Dropdown Menu

    Practical CSS: Build a Dropdown Menu

    Course • Beginner

    One of the most common patterns in web design is a navbar with a multi-level dropdown menu. While this is relatively simple to create, it’s still problematic...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories