Navigation
The Navigation component facilitates seamless content exploration, enhancing user experience. It offers an intuitive menu system with easy access to various sections and features. With clear organization and user-friendly design, Navigation streamlines user interaction and improves site accessibility.
Introduction
The Navigation component provides a user-friendly and accessible menu system to facilitate smooth navigation throughout the website or application. It serves as a primary means for users to move between different sections and pages.
Visual representation
The following element is a visual representation of the navigation component.
Note: we have taken a modular approach by creating separate code blocks for both the desktop and responsive versions. This approach offers us the flexibility to manage and modify each version independently, ensuring that changes made to one won't affect the other. Let's take a closer look at how we achieve this:
Code structure
The Navigation component consists of a ` <nav> ` element with the class ` .main-navigation ` for styling purposes. Inside the navigation, a ` <ul> ` element with the class ` .menu ` contains individual ` <li> ` elements for each menu item. Each menu item is represented by an ` <a> ` element with relevant classes and attributes.
<!-- Desktop -->
<div class="hidden lg:block">
<div class="header-navs">
<div class="container">
<div class="flex content-between flex-wrap lg:flex-nowrap lg:justify-between lg:items-center">
<nav class="main-navigation" aria-label="Main navigation">
<div class="menu-main-menu-container">
<ul class="menu nav-menu lg:flex lg:items-center lg:gap-1 xl:gap-2">
<li class="menu-item lg:inline-flex lg:items-center has-link-icon active-page">
<a href="#" class="hover:!text-primary-800 hover:!border-primary-800">
<svg aria-hidden="true" class="text-inherit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54a8,8,0,0,1,2.62,5.92V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Nav Link</span>
</a>
</li>
<li class="menu-item group">
<a href="#" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Nav Link 2</a>
</li>
<li class="menu-item group">
<a href="#" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Nav Link 3</a>
</li>
</ul>
</div>
</nav>
<div class="header-navs-right">
<ul class="flex items-center">
<li>
<a href="#" data-tooltip-placement="bottom" data-tooltip-target="tooltip-login" class="lg:h-12 xl:h-14 lg:px-2 xl:px-3 flex items-center justify-center flex-shrink-0">
<svg class="flex-shrink-0 w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="96" r="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span class="sr-only">Login</span>
</a>
<div id="tooltip-login" role="tooltip" class="z-50 aegov-tooltip">
Login
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<a href="#" data-tooltip-placement="bottom" data-tooltip-target="tooltip-accessibility" class="lg:h-12 xl:h-14 lg:px-2 xl:px-3 flex items-center justify-center flex-shrink-0">
<svg class="flex-shrink-0 w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="40" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M39,102.9C27.31,97.5,31.15,80,44,80H212c12.87,0,16.71,17.5,5,22.9L160,128l22.87,86.93a12,12,0,0,1-21.75,10.14L128,168,94.88,225.07a12,12,0,0,1-21.75-10.14L96,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span class="sr-only">Accessibility</span>
</a>
<div id="tooltip-accessibility" role="tooltip" class="z-50 aegov-tooltip">
Accessibility
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<a href="#" data-tooltip-placement="bottom" data-tooltip-target="tooltip-Switch-language" class="lg:h-12 xl:h-14 lg:px-2 xl:px-3 flex items-center justify-center flex-shrink-0" >
<svg class="flex-shrink-0 w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M88,128c0,37.46,13.33,70.92,34.28,93.49a7.77,7.77,0,0,0,11.44,0C154.67,198.92,168,165.46,168,128s-13.33-70.92-34.28-93.49a7.77,7.77,0,0,0-11.44,0C101.33,57.08,88,90.54,88,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="37.46" y1="96" x2="218.54" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="37.46" y1="160" x2="218.54" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span class="sr-only">Switch language</span>
</a>
<div id="tooltip-Switch-language" role="tooltip" class="z-50 aegov-tooltip">
Switch language
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Desktop end -->
<!-- Responsive -->
<div class="lg:hidden">
<div class="py-2.5 lg:py-3">
<div class="container">
<div class="max-lg:flex max-lg:items-center justify-between">
<div class="logos">
<div class="logo-item">
<a href="#" class="logo block">
<img src="img/logo-ministry.svg" alt="logo">
<span class="sr-only">Logo</span>
</a>
</div>
</div>
<div class="header-top-right">
<div>
<div class="flex items-center gap-3">
<button data-modal-target="openNav" data-modal-toggle="openNav" class="hamburger-icon text-aeblack-700">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<line x1="40" y1="128" x2="216" y2="128" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="40" y1="64" x2="216" y2="64" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
<line x1="40" y1="192" x2="216" y2="192" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
</svg>
<span class="sr-only">Toggle main menu</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="openNav" tabindex="-1" aria-hidden="true" class="responsive-menu !transform-none hidden [&_.main-navigation_.menu-item.active-page_a]:border-none [&_.accordion-active_svg]:rotate-180 max-lg:py-4 lg:hidden max-lg:bg-whitely-50 max-lg:fixed max-lg:inset-0 max-lg:w-full max-lg:[&_li_a]:w-full max-lg:[&_li_a]:py-2 max-lg:[&_.submenu-btn]:!absolute max-lg:[&_.submenu-btn]:end-0 max-lg:[&_.submenu-btn]:top-2 max-lg:[&_.submenu-btn]:w-6 max-lg:z-50 max-lg:flex-wrap max-lg:items-start max-lg:justify-start">
<div class="w-full">
<div class="w-full max-lg:px-4 flex items-center justify-between gap-4 mb-4">
<a href="">
<img src="img/emblem.png" alt="logo" width="41">
</a>
<div class="flex items-center gap-4">
<button data-modal-hide="openNav">
<svg aria-hidden="true" class="w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span class="sr-only">Close main menu</span>
</button>
</div>
</div>
<div class="max-lg:max-h-[calc(100vh_-_6.375rem)] max-lg:px-4 max-lg:overflow-auto">
<nav class="main-navigation mb-4" aria-label="Main navigation">
<div class="menu-main-menu-container">
<ul id="responsive-header-collapse" data-accordion="collapse" class="menu nav-menu">
<li class="menu-item has-link-icon">
<a href="#">
<svg class="text-inherit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.54a8,8,0,0,1,2.62-5.92l80-75.54a8,8,0,0,1,10.77,0l80,75.54a8,8,0,0,1,2.62,5.92V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Nav Link</span>
</a>
</li>
<li class="menu-item">
<a href="#">Nav Link 2</a>
</li>
<li class="menu-item active-page">
<a href="#">Nav Link 3</a>
</li>
</ul>
</div>
</nav>
<div class="header-top-right">
<div>
<ul class="header-common-links">
<li>
<a href="#">
<svg class="flex-shrink-0 w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="96" r="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span>Login</span>
</a>
</li>
<li>
<a href="#">
<svg class="flex-shrink-0 w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="40" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M39,102.9C27.31,97.5,31.15,80,44,80H212c12.87,0,16.71,17.5,5,22.9L160,128l22.87,86.93a12,12,0,0,1-21.75,10.14L128,168,94.88,225.07a12,12,0,0,1-21.75-10.14L96,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span>Accessibility</span>
</a>
</li>
<li>
<a href="#" >
<svg class="flex-shrink-0 w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"/>
<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<path d="M88,128c0,37.46,13.33,70.92,34.28,93.49a7.77,7.77,0,0,0,11.44,0C154.67,198.92,168,165.46,168,128s-13.33-70.92-34.28-93.49a7.77,7.77,0,0,0-11.44,0C101.33,57.08,88,90.54,88,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="37.46" y1="96" x2="218.54" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="37.46" y1="160" x2="218.54" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</svg>
<span>Switch language</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
This component depends on the use of JavaScript. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.
Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.
Variations
Javascript requiredVariations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.
Navigation with dropdown
This navigation variation aims to provide a better user experience by combining dropdown and accordion functionalities for desktop and responsive views, respectively.
This combination of dropdown and accordion provides an optimal user experience for both desktop and mobile users. Desktop users benefit from quick access to the dropdown menu upon hover, while mobile users can easily navigate through the accordion menu, which takes up less space on smaller screens
Multi-Column dropdown
This variation of the dropdown menu presents a visually appealing and organized way to display multiple subcategories under each main menu item. The dropdown menu expands horizontally with multiple columns, making it easier for users to navigate and find the content they are interested in. Each main menu item reveals a set of descriptive subcategories, providing users with a clear overview of the available options.
Mega menu
A mega menu is an advanced type of navigation menu that allows website visitors to access a wide range of options and content in a visually appealing and organized manner. Unlike traditional dropdown menus, mega menus display multiple columns of content, often organized into categories or sections, making it easier for users to find what they are looking for without navigating through multiple pages.
To customize the columns of the mega menu, you can easily adjust the number of columns by modifying the ` .grid-cols-4 ` class, along with the ` .megamenu-columns `class. In the code, you may find the ` .megamenu-columns ` class, which serves as a reference to the mega menu section. Alongside, you will likely encounter the ` .grid-cols-4 ` class, which determines the specific number of columns the mega menu will have.
-
To have five columns, you can change it to
` .grid-cols-5 ` -
To have three columns, you can change it to
` grid-cols-3 `
Behaviour
-
On Hover: When a user hovers over a main menu item with a submenu, the mega menu should automatically open, displaying its content.
-
Keyboard Navigation:Users can use the Arrow keys to navigate through the main menu items. When a main menu item with a caret icon (▼) receives focus, pressing the Space key or Enter key will open and close the corresponding mega menu.
-
Mobile Behavior: In mobile view, to improve the user experience and accommodate smaller screens, the mega menu will transform into an accordion-style menu.
Accessibility
Keyboard interactions are incorporated for accessibility, where 'Tab' to interacts with a navigation, and 'Spacebar Key' key on icon it will toggles the navigation submenu.
To ensure accessibility for the Textarea component, follow these guidelines:
-
ARIA Roles and Attributes: Use appropriate ARIA (Accessible Rich Internet Applications) roles and attributes to enhance accessibility for screen readers and assistive technologies.
-
Focus Management: When the mega menu opens, set the focus on the first focusable element inside the mega menu. When it closes, return the focus to the main menu item that triggered the opening of the mega menu. This behavior helps users with visual impairments to understand the context changes.
-
Keyboard Navigation: Test the mega menu using only the keyboard to verify that all interactive elements are accessible and focusable. Users should be able to navigate through the links inside the mega menu using the Tab and Arrow keys easily.
-
Clear Instructions: Provide clear and concise instructions within the mega menu to help users understand the available options and how to navigate through the menu effectively.
-
Responsive Design: Ensure that the mega menu is fully functional and accessible on different devices and screen sizes, including mobile devices.
Responsive element
This component can be resized based on breakpoint prefixes.
You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com
Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.
By applying the ` check-sm `, the ` md:check-base ` and ` 2xl:check-lg ` classes, the navigation dimensions adjust to different screen sizes, ensuring optimal visibility and usability.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
-
تسجيل الدخول
تسجيل الدخول
-
الإمكانية
الإمكانية
-
تغيير اللغة
تغيير اللغة
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
Navigation components play a crucial role in user interfaces, guiding users through digital experiences, and helping them find information or complete tasks efficiently.
Where to use a navigation?
- Navigation components, such as horizontal or vertical menus, are used in website headers or sidebars to provide users with clear pathways to different sections, pages, or categories of the website.
- On larger websites, sitemaps serve as comprehensive navigation components that provide an overview of the site's structure and allow users to access specific pages directly.
- Headers and footers often contain navigation components like contact information, quick links, or site-wide actions.
