# Navigation , menus and sub menu

This page will provide a step-by-step guide on fixing site and mobile navigation with Flowy Builder. The guide will first address fixing accessibility issues for the different types of site navigation. This includes the main types of navigation, namely: Horizontal Navigation, Vertical Navigation, Hamburger Menu, and **Mega Menu**.

###

{% tabs %}
{% tab title="Introduction" %}
Navigation menus or navbars play a crucial role on websites as they facilitate seamless access from one web page to another throughout a site.  An inaccessible navigation bar can hinder people relying on assistive technologies from finding content on a website.

### Overall Best Practices on Creating Accessible Navigation.

* The navigation elements must be links.
* Put your links within an unordered list structure so that a screen reader will read out how many list items are there.
* Use the semantic `<nav>` tag around your unordered list and links with an ARIA `role='navigation'` attribute.
* Use ARIA role="navigation" if semantic \<nav> was not used on the wrapper for the primary navigation component.
* If there are multiple navigation \<nav> items on your page, use 'aria-label' to provide a differentiating title for each item.
* If you have your navigation hidden use CSS: `{display: none;}`
* On mobile view, implement a 'button' element or implement ARIA  'role="button" to inform assistive technologies that it is an interactive element.
* If graphics were only used, provide an alt text to the element.
* Ensure that 'aria-expanded' and 'aria-controls' attributes are implemented on the button to indicate the expanded and collapsed states of the navigation to assistive technologies, and what element is controlled by the button trigger respectively.
* If using an `aria-hidden` attribute, you should toggle this property upon showing and hiding the navigation.
  {% endtab %}

{% tab title="Horizontal Navigation" %}

### Introduction

This is the most common type of navigation bar and it appears horizontally across the top of a web page.  It is mainly used to accommodate top-level links or accommodate a few categories/sections to ensure easy access and navigation for users.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 &#x20;

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FwGB7o3Ie9j0lxku6mtuB%2Fhorizontal%20nav.png?alt=media&#x26;token=6253312a-d5f8-4380-8170-baa543f2bab9" alt="A screenshot of a sample web page featuring a horizontal navigation bar. The screenshot features navigation items,a  large text written &#x27;company logo&#x27; and 5 fictitious links. "><figcaption><p>A sample web page with a horizontal navigation without a sub-navigation.</p></figcaption></figure>

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FgdrDVkilIp36clgxsNsx%2Fhorizontal%20nav%20with%20submenu.png?alt=media&#x26;token=1fe8571c-e4a4-468a-8c52-e6070bd0f5f8" alt="A screenshot of a sample web-page demonstrating horizontal navigation with sub-navigation. This website consists of 4 navigation items; products, solutions, pricing and resources. With the exception of pricing, the rest have sub-navigation."><figcaption><p>A sample web page with a horizontal navigation with a sub-navigation (sub-menu)</p></figcaption></figure>

### Best Practices

1. &#x20;If your horizontal navigation includes sub-navigation (drop-down menu) ensure they are accessible using both keyboard and screen reader interactions.
2. &#x20;Use simple and clear link titles for your navigation content.
3. &#x20;On mobile view, provide an accessible close mechanism for menus, such as a "Close" button or an option to click outside the menu to close it, ensuring that users can easily dismiss the menu when needed.
4. &#x20;Suitable for content with few sections/categories.

{% embed url="<https://youtu.be/y6puGsbaSzU?rel=0>" %}
YouTube video on how to make submenu/dropdown content accessible using Flowy
{% endembed %}

### How to Fix with Flowy

This sub-section addresses fixing horizontal navigation with and without a sub-navigation

#### How to Fix Horizontal Navigation without a sub-navigation (drop-down menu).

1. &#x20;Start by checking if the `<nav>` landmark is present on your primary navigation. If present, skip the next step, if not proceed to the next step.
2. &#x20;Determine the element/wrapper that the primary `<nav>` component will be applied to.

Sample Code for Implementing Horizontal Navigation
{% endtab %}

{% tab title="Vertical Navigation" %}
Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Vertical Navigation
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Hamburger Menu" %}
Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Hamburger Navigation
{% endtab %}

{% tab title="Mega  Menu" %}
Introduction

Best Practices

How to Fix with Flowy

Sample Code for Implementing Mega Navigation
{% endtab %}
{% endtabs %}

{% embed url="<https://youtu.be/6geqGQmH_eo?rel=0>" %}