UAsk EN

Header

The header is the topmost section of a website, featuring the logo, navigation menus, secondary menu and more.

For an enhanced, consistent and modular user experience, we have crafted two distinct headers - one for mobile and one for desktop. This approach ensures that your website is presented optimally on both types of devices, delivering a seamless and efficient navigation experience for all visitors.

Key elements to note

  • The logo of the entity must be placed on the top left corner. The logo must be an SVG file, and must not exceed 110px in height. It is possible that authorities may need to make certain variations in the height of the logo, however you must aim not to exceed this height.
  • The Gold Star Rating (GSR) logo must be placed near the the logo. The necessary assigned GSR logo must be used for each entity. Refer to the Modal component to know more about how to provide feedback on the GSR logo.
  • For ministries:
    • The search element will be always visible.
  • For authorities:
    • The authority must place the UAE emblem on the right section of the header.
    • Your entity logo must not exceed the UAE emblem in height.
    • The search element will move to an icon on the secondary navigation.
    • The navigation elements, colours, hover colours and other aspects of the header will adapt to the custom colour swatch an authority may add to to the configuration. For more information on this, you may refer to the colour guideline and the use of custom colours.
  • The primary navigation must follow the format listed below:
    • There cannot be more than 7 elements added to a navigation.
    • The first element must be a link to the homepage.
    • The second element must be the link to the service catalogue with a dropdown for services.
    • The last 4 links must be in the order of "Digital participation", "Open data", "About" and "More" - where the element "More" is optional and is a choice for an entity to add if they need more links added to the navigation.
  • The secondary navigation will include the following links as icons with tooltips:
    • A link to the login section. You may choose to redirect to a page, or open the login within a modal. If you do choose to allow a user to authenticate via a modal window, you must still have a login page identifiable via a url.
    • A link to the accessibility page and policy of the website, explainaing how the website is integrated into accessibility functions of the browser and operating system, and what additional tools are provided.
    • A link to allow a user to update their language preference and view the website in other languages. This must use the default provided language selection modal.
This component depends on Javascript

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.

Header for Ministries

<header class="aegov-header">
   <div class="header-desktop hidden lg:block">
      <div class="header-top py-3">
         <div class="container">
            <div class="lg:flex lg:items-center lg:justify-between">
               <div class="header-logo logos">
                  <div class="logo-item">
                     <a href="#" class="logo block"> <img src="https://designsystem.gov.ae/img/logo-ministry.svg" alt="logo"> <span class="sr-only">Logo</span> </a>
                  </div>
                  <div class="logo-item">
                     <a href="#" data-modal-target="modal-gold-star" data-modal-toggle="modal-gold-star" class="block"> <img src="https://designsystem.gov.ae/img/global-star.png" alt="logo" class="secondary-logo"> <span class="sr-only">Gold star Logo</span> </a>
                  </div>
               </div>
               <div class="header-top-right">
                  <form action="#" method="post">
                     <div class="aegov-form-control w-64 xl:w-80 ">
                        <div class="form-control-input">
                           <span class="control-prefix">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none"></rect>
                                 <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                                 <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                              </svg>
                           </span>
                           <input type="search" aria-label="search in site" name="searchelem" id="searchelem" placeholder="search for something"> 
                        </div>
                     </div>
                     <input type="submit" value="" class="hidden"> 
                  </form>
               </div>
            </div>
         </div>
      </div>
      <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">
                           <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">
                              <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>Home</span> 
                           </a>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="OurServicesHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Services</a>
                           <button id="OurServicesMenus" data-dropdown-toggle="OurServicesHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "Service catalogue"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <div id="OurServicesHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 !inset-x-0 !top-full !transform-none xl:px-4 2xl:px-5">
                              <div class="container">
                                 <div class="lg:grid lg:grid-cols-5 [&>div]:p-3" aria-labelledby="OurServicesMenus">
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #8</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #9</a> </li>
                                          <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">View all 20 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">View all 10 services</a> </li>
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center"> <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">A custom link</a> </li>
                        <li class="menu-item lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="DigitalParticipationHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Digital participation</a>
                           <button id="DigitalParticipationMenus" data-dropdown-toggle="DigitalParticipationHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "Digital participation"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center -->
                           <div id="DigitalParticipationHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="DigitalParticipationMenus">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Participate</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Events</a> </li>
                                       <li class="menu-item"> <a href="#">Social media channels</a> </li>
                                       <li class="menu-item"> <a href="#">Survey and polls</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Media</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">News and press releases</a> </li>
                                       <li class="menu-item"> <a href="#">Video archives</a> </li>
                                       <li class="menu-item"> <a href="#">Media gallery</a> </li>
                                       <li class="menu-item"> <a href="#">Insights and blogs</a> </li>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Policies</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Digital participation policy</a> </li>
                                       <li class="menu-item"> <a href="#">Social media content policy</a> </li>
                                       <li class="menu-item"> <a href="#">National relationship management</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center"> <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">Open data</a> </li>
                        <li class="menu-item relative lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="AboutHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">About</a>
                           <button id="AboutMenus" data-dropdown-toggle="AboutHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "About the ministry"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="AboutHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="AboutMenus">
                                 <div>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">About the Ministry</a> </li>
                                       <li class="menu-item"> <a href="#">The Minister</a> </li>
                                       <li class="menu-item"> <a href="#">Minister of State for
                                          Financial Affairs</a> 
                                       </li>
                                       <li class="menu-item"> <a href="#">Organization chart</a> </li>
                                       <li class="menu-item"> <a href="#">Strategy</a> </li>
                                       <li class="menu-item"> <a href="#">Awards</a> </li>
                                       <li class="menu-item"> <a href="#">Contact</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="MoreHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">More</a>
                           <button id="MoreMenus" data-dropdown-toggle="MoreHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "More"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="MoreHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="MoreMenus">
                                 <div>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                       <li class="menu-item"> <a href="#">Press contact and media kit</a> </li>
                                       <li class="menu-item"> <a href="#">Federal debt management office</a> </li>
                                       <li class="menu-item"> <a href="#">Digital procurement</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </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-modal-target="modal-lang" data-modal-toggle="modal-lang" 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 no-underline !text-lg !font-normal">EN
                           <svg class="flex-shrink-0 w-4 h-4 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                             <rect width="256" height="256" fill="none"></rect>
                             <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
                           </svg>
                         </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>
   <!-- header for mobile -->
   <div class="header-mobile lg:hidden">
      <div class="header-top py-2">
         <div class="container">
            <div class="max-lg:flex max-lg:items-center justify-between">
               <div class="header-logo logos">
                  <div class="logo-item">
                     <a href="#" class="logo block"> <img src="https://designsystem.gov.ae/img/logo-ministry.svg" alt="logo"> <span class="sr-only">Logo</span> </a>
                  </div>
                  <div class="logo-item">
                     <a href="#" data-modal-target="modal-gold-star" data-modal-toggle="modal-gold-star" class="block"> <img src="https://designsystem.gov.ae/img/global-star.png" alt="logo" class="secondary-logo"> <span class="sr-only">Gold star Logo</span> </a>
                  </div>
               </div>
               <div class="header-top-right">
                  <div>
                     <div class="flex items-center gap-3">
                        <button data-modal-target="openMenu" data-modal-toggle="openMenu" 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="openMenu" 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="https://designsystem.gov.ae/img/logo-ministry.svg" alt="logo" width="150"> </a>
               <div class="flex items-center gap-4">
                  <button id="dropdownButtonSearch" data-dropdown-placement="bottom-end" data-dropdown-toggle="dropdownSearchMobile" class="aegov-btn btn-icon btn-soft btn-xs" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none"></rect>
                        <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                        <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                     </svg>
                     <span class="sr-only">search in site</span> 
                  </button>
                  <button data-modal-hide="openMenu">
                     <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">
               <!-- Search for mobile dropdown -->
               <form action="#" method="post">
                  <div class="aegov-form-control control-sm w-64 xl:w-80 aegov-dropdown hidden max-md:!static max-md:!transform-none max-md:w-full" id="dropdownSearchMobile">
                     <div class="form-control-input">
                        <span class="control-prefix">
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                              <rect width="256" height="256" fill="none"></rect>
                              <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                              <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                           </svg>
                        </span>
                        <input type="search" aria-label="search in site" name="searchelem" id="searchelemMobile" placeholder="search for something">
                        <input type="submit" value="" class="hidden"> 
                     </div>
                  </div>
               </form>
               <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>Home</span> 
                           </a>
                        </li>
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#">services</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionOurServices" data-accordion-target="#accordion-collapse-service" aria-controls="accordion-collapse-service">
                              <span><span class="sr-only">show submenu for "services"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from left -->
                           <div id="accordion-collapse-service" class="submenu hidden z-10 bg-transparent" aria-labelledby="accordionOurServices">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #8</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #9</a> </li>
                                       <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">View all 20 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">View all 10 services</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative"> <a href="#">A custom link</a> </li> 
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#">Digital participation</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionOurDigital" data-accordion-target="#accordion-collapse-digital" aria-controls="accordion-collapse-digital">
                              <span><span class="sr-only">show submenu for "Digital participation"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <div id="accordion-collapse-digital" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="DigitalParticipationButton">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Participate</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Events</a> </li>
                                       <li class="menu-item"> <a href="#">Social media channels</a> </li>
                                       <li class="menu-item"> <a href="#">Survey and polls</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Media</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">News and press releases</a> </li>
                                       <li class="menu-item"> <a href="#">Video archives</a> </li>
                                       <li class="menu-item"> <a href="#">Media gallery</a> </li>
                                       <li class="menu-item"> <a href="#">Insights and blogs</a> </li>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Policies</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Digital participation policy</a> </li>
                                       <li class="menu-item"> <a href="#">Social media content policy</a> </li>
                                       <li class="menu-item"> <a href="#">National relationship management</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative"> <a href="#">Open data</a> </li>
                        <li class="menu-item relative menu-item-has-children active-page">
                           <a href="#" id="AboutUsButton">About us</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionAbout" data-accordion-target="#accordion-collapse-about" aria-controls="accordion-collapse-about">
                              <span><span class="sr-only">show submenu for "About us"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center -->
                           <div id="accordion-collapse-about" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="AboutUsButton">
                                 <div>
                                    <ul>
                                       <li class="menu-item"> <a href="#">About the Ministry</a> </li>
                                       <li class="menu-item"> <a href="#">The Minister</a> </li>
                                       <li class="menu-item"> <a href="#">Minister of State for
                                          Financial Affairs</a> 
                                       </li>
                                       <li class="menu-item"> <a href="#">Organization chart</a> </li>
                                       <li class="menu-item"> <a href="#">Strategy</a> </li>
                                       <li class="menu-item"> <a href="#">Awards</a> </li>
                                       <li class="menu-item"> <a href="#">Contact</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#" id="MoreButton">More</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionMore" data-accordion-target="#accordion-collapse-more" aria-controls="accordion-collapse-more">
                              <span><span class="sr-only">show submenu for "More"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="accordion-collapse-more" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="MoreButton">
                                 <div>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                       <li class="menu-item"> <a href="#">Press contact and media kit</a> </li>
                                       <li class="menu-item"> <a href="#">Federal debt management office</a> </li>
                                       <li class="menu-item"> <a href="#">Digital procurement</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </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="#" data-modal-target="modal-lang" data-modal-toggle="modal-lang">
                              <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>EN</span> 
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- header for mobile end -->
</header>
<!-- Language Modal -->
<div id="modal-lang" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-[60]" role="dialog">
   <div class="relative sm:w-full sm:max-w-sm max-h-full">
      <div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
         <button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-lang">
            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="sr-only">Close modal</span> 
         </button>
         <div>
            <div class="lang-header"> <a href="#" class="lang-primary">English</a> <span class="lang-primary-divider"></span> <a href="#" class="lang-primary font-notokufi">عربي</a> </div>
            <div class="lang-other px-3 md:px-4 xl:px-5">
               <div class="px-3 md:px-4 xl:px-5">
                  <p class="lang-other-title">Other languages</p>
                  <ul class="divide-y divide-aeblack-100">
                     <li> <a href="#" class="lang-other-link">French</a> </li>
                     <li> <a href="#" class="lang-other-link">Spanish</a> </li>
                     <li> <a href="#" class="lang-other-link">German</a> </li>
                     <li> <a href="#" class="lang-other-link">Portuguese</a> </li>
                     <li> <a href="#" class="lang-other-link">Russian</a> </li>
                  </ul>
               </div>
            </div>
            <div class="mt-6 md:mt-8 lg:mt-10 xl:mt-12">
               <p class="lang-bottom-text">The list of “Other languages” listed above use Google Translate to create an automated translation of content for the purpose of display. Accuracy of automated content translation is not guaranteed. </p>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Gold star modal -->
<div id="modal-gold-star" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-[60]" role="dialog">
   <div class="relative sm:w-full sm:max-w-sm max-h-full">
      <div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
         <button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-gold-star">
            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="sr-only">Close modal</span> 
         </button>
         <div>
            <div class="text-center"> <img class="inline-block w-28 md:w-32 lg:w-36 xl:w-40 2xl:w-44 mb-4 xl:mb-6" src="https://designsystem.gov.ae/img/global-star.png" alt="Gold Star Rating" width="180" height="180"> </div>
            <div class="text-center">
               <p class="text-base text-aeblack-800 font-normal mb-4 xl:mb-6">The Federal Authority for Identity, Citizenship, Customs & Port Security was awarded a <a href="#" class="text-aegold-600 font-bold no-underline"> 5 star rating</a> by the Global Star Rating System for Services on 14/04/2022 </p>
               <a href="#" class="aegov-btn">Learn more</a> 
            </div>
            <div class="text-center mt-4 xl:mt-6"> <a href="#" class="text-xs font-light truncate max-w-full no-underline">http://portal.gsr.ae/verify</a> </div>
         </div>
      </div>
   </div>
</div>

Header for Authorities

<header class="aegov-header">
   <div class="header-desktop hidden lg:block">
      <div class="header-top py-3">
         <div class="container">
            <div class="lg:flex lg:items-center lg:justify-between">
               <div class="header-logo logos">
                  <div class="logo-item">
                     <a href="/" class="logo block"> <img src="https://designsystem.gov.ae/img/logo-tdra.svg" alt="logo" class="!h-auto lg:!w-72 xl:!w-80"> <span class="sr-only">Logo</span> </a>
                  </div>
                  <div class="logo-item">
                     <a href="#" data-modal-target="modal-gold-star" data-modal-toggle="modal-gold-star" class="block"> <img src="https://designsystem.gov.ae/img/global-star.png" alt="logo" class="secondary-logo"> <span class="sr-only">Gold star Logo</span> </a>
                  </div>
               </div>
               <div class="header-top-right flex">
                  <a href="#"> <img src="https://designsystem.gov.ae/img/emblem.png" alt="" class="emblem-logo"> </a>
               </div>
            </div>
         </div>
      </div>
      <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">
                           <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">
                              <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>Home</span> 
                           </a>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="OurServicesHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Services</a>
                           <button id="OurServicesMenus" data-dropdown-toggle="OurServicesHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "Service catalogue"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <div id="OurServicesHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 !inset-x-0 !top-full !transform-none xl:px-4 2xl:px-5">
                              <div class="container">
                                 <div class="lg:grid lg:grid-cols-5 [&>div]:p-3" aria-labelledby="OurServicesMenus">
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #8</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #9</a> </li>
                                          <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                          <li class="menu-item"> <a href="#">View all 20 services</a> </li>
                                       </ul>
                                    </div>
                                    <div>
                                       <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                       <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                          <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                          <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                          <li class="menu-item"> <a href="#">View all 10 services</a> </li>
                                       </ul>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center"> <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">A custom link</a> </li>
                        <li class="menu-item lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="DigitalParticipationHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">Digital participation</a>
                           <button id="DigitalParticipationMenus" data-dropdown-toggle="DigitalParticipationHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "Digital participation"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center -->
                           <div id="DigitalParticipationHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="DigitalParticipationMenus">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Participate</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Events</a> </li>
                                       <li class="menu-item"> <a href="#">Social media channels</a> </li>
                                       <li class="menu-item"> <a href="#">Survey and polls</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Media</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">News and press releases</a> </li>
                                       <li class="menu-item"> <a href="#">Video archives</a> </li>
                                       <li class="menu-item"> <a href="#">Media gallery</a> </li>
                                       <li class="menu-item"> <a href="#">Insights and blogs</a> </li>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Policies</h2>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Digital participation policy</a> </li>
                                       <li class="menu-item"> <a href="#">Social media content policy</a> </li>
                                       <li class="menu-item"> <a href="#">National relationship management</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item lg:inline-flex lg:items-center"> <a href="#" class="hover:!text-primary-800 hover:!border-primary-800">Open data</a> </li>
                        <li class="menu-item relative lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="AboutHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">About</a>
                           <button id="AboutMenus" data-dropdown-toggle="AboutHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "About the ministry"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="AboutHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="AboutMenus">
                                 <div>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">About</a> </li>
                                       <li class="menu-item"> <a href="#">Organization chart</a> </li>
                                       <li class="menu-item"> <a href="#">Strategy</a> </li>
                                       <li class="menu-item"> <a href="#">Awards</a> </li>
                                       <li class="menu-item"> <a href="#">Contact</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative lg:inline-flex lg:items-center menu-item-has-children group">
                           <a href="#" data-dropdown-toggle="MoreHover" data-dropdown-trigger="hover" class="group-hover:!text-primary-800 group-hover:!border-primary-800">More</a>
                           <button id="MoreMenus" data-dropdown-toggle="MoreHover" class="submenu-btn flex-shrink-0 group-hover:!text-primary-800">
                              <span><span class="sr-only">show submenu for "More"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="MoreHover" class="submenu hidden z-10 lg:py-4 xl:py-5 2xl:py-6 rounded-bordered">
                              <div class="[&>div]:p-3 [&>div]:w-72 lg:flex lg:flex-wrap" aria-labelledby="MoreMenus">
                                 <div>
                                    <ul class="space-y-1.5 xl:space-y-2 2xl:space-y-2.5">
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                       <li class="menu-item"> <a href="#">Press contact and media kit</a> </li>
                                       <li class="menu-item"> <a href="#">Federal debt management office</a> </li>
                                       <li class="menu-item"> <a href="#">Digital procurement</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </nav>
               <div class="header-navs-right">
                  <ul class="flex items-center">
                     <li>
                        <a href="#" data-dropdown-placement="bottom-end" data-dropdown-toggle="dropdown-search" data-tooltip-placement="bottom" data-tooltip-target="tooltip-search" 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"></rect>
                              <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                              <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                           </svg>
                           <span class="sr-only">Search</span> 
                        </a>
                        <div id="tooltip-search" role="tooltip" class="z-50 aegov-tooltip">
                           Search
                           <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                        <!-- Search for mobile dropdown -->
                        <form action="#" method="post">
                           <div class="aegov-form-control w-64 xl:w-72 aegov-dropdown hidden max-md:!static max-md:!transform-none max-md:w-full" id="dropdown-search">
                              <div class="form-control-input">
                                 <span class="control-prefix">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                       <rect width="256" height="256" fill="none"></rect>
                                       <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                                       <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                                    </svg>
                                 </span>
                                 <input type="search" aria-label="search in site" name="searchelem" id="searchelemMobile" placeholder="search for something">
                                 <input type="submit" value="" class="hidden"> 
                              </div>
                           </div>
                        </form>
                     </li>
                     <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-modal-target="modal-lang" data-modal-toggle="modal-lang" 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 no-underline !text-lg !font-normal">EN
                           <svg class="flex-shrink-0 w-4 h-4 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                             <rect width="256" height="256" fill="none"></rect>
                             <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
                           </svg>
                         </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>
   <!-- header for mobile -->
   <div class="header-mobile lg:hidden">
      <div class="header-top py-2">
         <div class="container">
            <div class="max-lg:flex max-lg:items-center justify-between">
               <div class="header-logo logos">
                  <div class="logo-item">
                     <a href="/" class="logo block"> <img src="https://designsystem.gov.ae/img/logo-tdra.svg" alt="logo" class="!h-auto max-lg:!w-64"> <span class="sr-only">Logo</span> </a>
                  </div>
                  <div class="logo-item">
                     <a href="#" data-modal-target="modal-gold-star" data-modal-toggle="modal-gold-star" class="block"> <img src="https://designsystem.gov.ae/img/global-star.png" alt="logo" class="secondary-logo"> <span class="sr-only">Gold star Logo</span> </a>
                  </div>
               </div>
               <div class="header-top-right">
                  <div>
                     <div class="flex items-center gap-3">
                        <button data-modal-target="openMenu" data-modal-toggle="openMenu" 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="openMenu" 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="https://designsystem.gov.ae/img/emblem.png" alt="" class="w-10"> </a>
               <div class="flex items-center gap-4">
                  <button id="dropdownButtonSearch" data-dropdown-placement="bottom-end" data-dropdown-toggle="dropdownSearchMobile" class="aegov-btn btn-icon btn-soft btn-xs" type="button">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                        <rect width="256" height="256" fill="none"></rect>
                        <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                        <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                     </svg>
                     <span class="sr-only">search in site</span> 
                  </button>
                  <button data-modal-hide="openMenu">
                     <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">
               <!-- Search for mobile dropdown -->
               <form action="#" method="post">
                  <div class="aegov-form-control control-sm w-64 xl:w-80 aegov-dropdown hidden max-md:!static max-md:!transform-none max-md:w-full" id="dropdownSearchMobile">
                     <div class="form-control-input">
                        <span class="control-prefix">
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                              <rect width="256" height="256" fill="none"></rect>
                              <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
                              <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
                           </svg>
                        </span>
                        <input type="search" aria-label="search in site" name="searchelem" id="searchelemMobile" placeholder="search for something">
                        <input type="submit" value="" class="hidden"> 
                     </div>
                  </div>
               </form>
               <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>Home</span> 
                           </a>
                        </li>
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#">Services</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionOurServices" data-accordion-target="#accordion-collapse-service" aria-controls="accordion-collapse-service">
                              <span><span class="sr-only">show submenu for "Services"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from left -->
                           <div id="accordion-collapse-service" class="submenu hidden z-10 bg-transparent" aria-labelledby="accordionOurServices">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #8</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #9</a> </li>
                                       <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">View all 40 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #6</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #7</a> </li>
                                       <li class="menu-item"> <a href="#">View all 20 services</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Service category</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Service item number #1</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #2</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #3</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #4</a> </li>
                                       <li class="menu-item"> <a href="#">Service item number #5</a> </li>
                                       <li class="menu-item"> <a href="#">View all 10 services</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative"> <a href="#">A custom link</a> </li>                           
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#">Digital participation</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionOurDigital" data-accordion-target="#accordion-collapse-digital" aria-controls="accordion-collapse-digital">
                              <span><span class="sr-only">show submenu for "Digital participation"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <div id="accordion-collapse-digital" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="DigitalParticipationButton">
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Participate</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Events</a> </li>
                                       <li class="menu-item"> <a href="#">Social media channels</a> </li>
                                       <li class="menu-item"> <a href="#">Survey and polls</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Media</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">News and press releases</a> </li>
                                       <li class="menu-item"> <a href="#">Video archives</a> </li>
                                       <li class="menu-item"> <a href="#">Media gallery</a> </li>
                                       <li class="menu-item"> <a href="#">Insights and blogs</a> </li>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                    </ul>
                                 </div>
                                 <div>
                                    <h2 class="submenu-title max-lg:text-sm">Policies</h2>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Digital participation policy</a> </li>
                                       <li class="menu-item"> <a href="#">Social media content policy</a> </li>
                                       <li class="menu-item"> <a href="#">National relationship management</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative"> <a href="#">Open data</a> </li>
                        <li class="menu-item relative menu-item-has-children active-page">
                           <a href="#" id="AboutUsButton">About</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionAbout" data-accordion-target="#accordion-collapse-about" aria-controls="accordion-collapse-about">
                              <span><span class="sr-only">show submenu for "About"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center -->
                           <div id="accordion-collapse-about" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="AboutUsButton">
                                 <div>
                                    <ul>
                                       <li class="menu-item"> <a href="#">About</a> </li>
                                       <li class="menu-item"> <a href="#">Organization chart</a> </li>
                                       <li class="menu-item"> <a href="#">Strategy</a> </li>
                                       <li class="menu-item"> <a href="#">Awards</a> </li>
                                       <li class="menu-item"> <a href="#">Contact</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </li>
                        <li class="menu-item relative menu-item-has-children">
                           <a href="#" id="MoreButton">More</a>
                           <button class="submenu-btn flex-shrink-0" id="accordionMore" data-accordion-target="#accordion-collapse-more" aria-controls="accordion-collapse-more">
                              <span><span class="sr-only">show submenu for "More"</span></span>
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                                 <rect width="256" height="256" fill="none" />
                                 <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
                              </svg>
                           </button>
                           <!-- submenu start from center with single or two col -->
                           <div id="accordion-collapse-more" class="submenu hidden z-10 bg-transparent">
                              <div class="[&>div]:p-3 [&_ul]:space-y-1.5" aria-labelledby="MoreButton">
                                 <div>
                                    <ul>
                                       <li class="menu-item"> <a href="#">Publications</a> </li>
                                       <li class="menu-item"> <a href="#">Press contact and media kit</a> </li>
                                       <li class="menu-item"> <a href="#">Federal debt management office</a> </li>
                                       <li class="menu-item"> <a href="#">Digital procurement</a> </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                        </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="#" data-modal-target="modal-lang" data-modal-toggle="modal-lang">
                              <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>EN</span> 
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- header for mobile end -->
</header>
<!-- Language Modal -->
<div id="modal-lang" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-[60]" role="dialog">
   <div class="relative sm:w-full sm:max-w-sm max-h-full">
      <div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
         <button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-lang">
            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="sr-only">Close modal</span> 
         </button>
         <div>
            <div class="lang-header"> <a href="#" class="lang-primary">English</a> <span class="lang-primary-divider"></span> <a href="#" class="lang-primary font-notokufi">عربي</a> </div>
            <div class="lang-other px-3 md:px-4 xl:px-5">
               <div class="px-3 md:px-4 xl:px-5">
                  <p class="lang-other-title">Other languages</p>
                  <ul class="divide-y divide-aeblack-100">
                     <li> <a href="#" class="lang-other-link">French</a> </li>
                     <li> <a href="#" class="lang-other-link">Spanish</a> </li>
                     <li> <a href="#" class="lang-other-link">German</a> </li>
                     <li> <a href="#" class="lang-other-link">Portuguese</a> </li>
                     <li> <a href="#" class="lang-other-link">Russian</a> </li>
                  </ul>
               </div>
            </div>
            <div class="mt-6 md:mt-8 lg:mt-10 xl:mt-12">
               <p class="lang-bottom-text">The list of “Other languages” listed above use Google Translate to create an automated translation of content for the purpose of display. Accuracy of automated content translation is not guaranteed. </p>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- Gold star modal -->
<div id="modal-gold-star" tabindex="-1" aria-hidden="true" class="aegov-modal hidden z-[60]" role="dialog">
   <div class="relative sm:w-full sm:max-w-sm max-h-full">
      <div class="aegov-modal-wrapper py-4 md:py-5 xl:py-8 px-4 xl:px-6">
         <button type="button" class="aegov-modal-close top-2 end-2" data-modal-hide="modal-gold-star">
            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="sr-only">Close modal</span> 
         </button>
         <div>
            <div class="text-center"> <img class="inline-block w-28 md:w-32 lg:w-36 xl:w-40 2xl:w-44 mb-4 xl:mb-6" src="https://designsystem.gov.ae/img/global-star.png" alt="Gold Star Rating" width="180" height="180"> </div>
            <div class="text-center">
               <p class="text-base text-aeblack-800 font-normal mb-4 xl:mb-6">The Federal Authority for Identity, Citizenship, Customs & Port Security was awarded a <a href="#" class="text-aegold-600 font-bold no-underline"> 5 star rating</a> by the Global Star Rating System for Services on 14/04/2022 </p>
               <a href="#" class="aegov-btn">Learn more</a> 
            </div>
            <div class="text-center mt-4 xl:mt-6"> <a href="#" class="text-xs font-light truncate max-w-full no-underline">http://portal.gsr.ae/verify</a> </div>
         </div>
      </div>
   </div>
</div>
Previous
Footer
Next
Hero