Government Design Component : Build your next best digital experience for Cambodia

This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.

Required

View it on Github

Example

Home
Link
Dropdown
Megamenu

Co-create innovative digital solutions with the Government
Discover events, blogs, open-source technologies and other collaboration opportunities

Features Features Features

Features Features Features

Features Features Features

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc sed augue lacus viverra vitae congue eu. Aliquet enim tortor at auctor urna nunc id cursus. Aliquam id diam maecenas ultricies. Tempus iaculis urna id volutpat lacus laoreet non. Mauris ultrices eros in cursus turpis massa. Magna etiam tempor orci eu lobortis elementum. Semper quis lectus nulla at volutpat diam ut venenatis. Elit eget gravida cum sociis. Erat velit scelerisque in dictum non. Ipsum consequat nisl vel pretium lectus quam id. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Interdum velit euismod in pellentesque massa.

Et pharetra pharetra massa massa ultricies mi quis. Velit scelerisque in dictum non consectetur a erat. Tellus molestie nunc non blandit massa enim. Sit amet nisl suscipit adipiscing bibendum est ultricies integer. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tristique senectus et netus et malesuada fames ac turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. A diam sollicitudin tempor id eu nisl nunc. Lorem ipsum dolor sit amet consectetur. Morbi quis commodo odio aenean. Et ultrices neque ornare aenean euismod elementum nisi quis. Cras pulvinar mattis nunc sed blandit. Ut faucibus pulvinar elementum integer enim neque volutpat. Amet nisl purus in mollis nunc sed id semper. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eget gravida cum sociis natoque penatibus et. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Elit sed vulputate mi sit. In hac habitasse platea dictumst. Nec dui nunc mattis enim ut tellus.

Viverra nibh cras pulvinar mattis nunc sed blandit libero. Gravida arcu ac tortor dignissim convallis aenean et tortor at. Accumsan sit amet nulla facilisi morbi tempus iaculis. In ante metus dictum at tempor commodo ullamcorper a. Pharetra et ultrices neque ornare. Sit amet facilisis magna etiam tempor orci eu. Malesuada proin libero nunc consequat interdum. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisi est sit amet facilisis magna etiam tempor orci. Duis ut diam quam nulla porttitor. Commodo viverra maecenas accumsan lacus vel facilisis. Nibh venenatis cras sed felis eget velit aliquet sagittis. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Diam vel quam elementum pulvinar etiam. Vitae nunc sed velit dignissim sodales ut.

      
    
         
<div style="height: 300px" class="overflow-auto">
  <nav aria-label="navbar" class="cgds navbar flex-column navbar-expand-lg">
    <header class="container d-flex flex-nowrap p-0">
      <div class="w-100 d-flex align-items-center justify-content-between px-4 px-md-5 py-4 py-sm-6 py-md-3 py-lg-4">
        <a class="navbar-brand d-flex justify-content-start" href="#">
          <img src="/assets/uncompressed_images/rachana.svg" alt="Home" height="80">
        </a>
      </div>
      <div class="d-flex align-items-center me-5">
        <nav aria-label="social-media" class="social d-flex me-3">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <a class="nav-link" aria-current="page" href="">
                <i class="bi bi-github" target="_blank" style="line-height: 1;"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div class="d-flex flag-icon text-center me-2">
          <a role="button" class="cgds btn" href="">
            <img src="/assets/uncompressed_images/cambodia-flag-icon.svg" width="32px" height="24px" alt="Home">
          </a>
        </div>
        <nav aria-label="social-media" class="social d-lg-block me-1">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <span class="cgds-line"></span>
            </li>
          </ul>
        </nav>
        <ul class="navbar-nav">
          <li class="nav-item align-self-center">
            <a class="cgds btn-gt" aria-current="page" href="">Sign In</a>
          </li>
        </ul>
        <div class="mobile-toggle d-flex align-items-center d-lg-none">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavExample1"
            aria-controls="navbarNavExample1" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
          </button>
        </div>
      </div>
    </header>
    <div class="px-4 px-md-5">
      <div class="collapse navbar-collapse px-4 px-md-5" id="navbarNavExample1">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="">Link</a>
          </li>
          <li class="nav-item cgds dropdown">
            <a class="nav-link cgds dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Dropdown <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="">Action</a></li>
              <li><a class="dropdown-item" href="">Another Action</a></li>
              <li><a class="dropdown-item" href="">Something</a></li>
              <div class="dropdown-divider"></div>
              <li><a class="dropdown-item" href="">Seperated Link</a></li>
            </ul>
          </li>
          <li class="nav-item cgds dropdown has-megamenu">
            <a class="nav-link cgds dropdown-toggle" href="#" id="megamenu" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Megamenu<i class="bi bi-chevron-down"></i>
            </a>
            <div class="dropdown-menu megamenu p-3" aria-labelledby="megamenu">
              <div class="d-flex justify-content-start">
                <div>
                  <b>Co-create innovative digital solutions with the Government</b>
                  <p>Discover events, blogs, open-source technologies and other collaboration opportunities</p>
                </div>
                <div>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="search-bar d-flex align-items-center ms-auto">
          <form class="w-100" action="">
            <div class="search-wrapper d-flex ps-2">
              <input type="text">
              <button>
                <i class="bi bi-search" target="_blank"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>
  <div class="p-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Nunc sed augue lacus viverra vitae congue eu. Aliquet enim tortor at auctor urna nunc id
      cursus. Aliquam id diam maecenas ultricies. Tempus iaculis urna id volutpat lacus laoreet non. Mauris
      ultrices eros in cursus turpis massa. Magna etiam tempor orci eu lobortis elementum. Semper quis lectus
      nulla at volutpat diam ut venenatis. Elit eget gravida cum sociis. Erat velit scelerisque in dictum non.
      Ipsum consequat nisl vel pretium lectus quam id. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus.
      Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Interdum velit euismod in pellentesque massa.
    </p>
    <p>Et pharetra pharetra massa massa ultricies mi quis. Velit scelerisque in dictum non consectetur a erat.
      Tellus molestie nunc non blandit massa enim. Sit amet nisl suscipit adipiscing bibendum est ultricies
      integer. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tristique senectus et netus et
      malesuada fames ac turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. A
      diam sollicitudin tempor id eu nisl nunc. Lorem ipsum dolor sit amet consectetur. Morbi quis commodo odio
      aenean. Et ultrices neque ornare aenean euismod elementum nisi quis. Cras pulvinar mattis nunc sed blandit.
      Ut faucibus pulvinar elementum integer enim neque volutpat. Amet nisl purus in mollis nunc sed id semper.
      Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eget gravida cum sociis natoque
      penatibus et. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Elit sed vulputate mi
      sit. In hac habitasse platea dictumst. Nec dui nunc mattis enim ut tellus.</p>
    <p>Viverra nibh cras pulvinar mattis nunc sed blandit libero. Gravida arcu ac tortor dignissim convallis aenean
      et tortor at. Accumsan sit amet nulla facilisi morbi tempus iaculis. In ante metus dictum at tempor commodo
      ullamcorper a. Pharetra et ultrices neque ornare. Sit amet facilisis magna etiam tempor orci eu. Malesuada
      proin libero nunc consequat interdum. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisi est sit
      amet facilisis magna etiam tempor orci. Duis ut diam quam nulla porttitor. Commodo viverra maecenas accumsan
      lacus vel facilisis. Nibh venenatis cras sed felis eget velit aliquet sagittis. Magna fermentum iaculis eu
      non diam phasellus vestibulum lorem. Diam vel quam elementum pulvinar etiam. Vitae nunc sed velit dignissim
      sodales ut.</p>
  </div>
</div>

        

Home
Link
Dropdown
Megamenu

Co-create innovative digital solutions with the Government
Discover events, blogs, open-source technologies and other collaboration opportunities

Features Features Features

Features Features Features

Features Features Features

      
    
         
<div style="height: 300px" class="overflow-auto">
  <nav aria-label="navbar" class="cgds navbar flex-column navbar-expand-lg">
    <header class="container d-flex flex-nowrap p-0">
      <div class="w-100 d-flex align-items-center justify-content-between px-4 px-md-5 py-4 py-sm-6 py-md-3 py-lg-4">
        <a class="navbar-brand d-flex justify-content-start" href="#">
          <img src="/assets/uncompressed_images/rachana.svg" alt="Home" height="80">
        </a>
      </div>
      <div class="d-flex align-items-center me-5">
        <nav aria-label="social-media" class="social d-flex me-3">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <a class="nav-link" aria-current="page" href="">
                <i class="bi bi-bell-fill" target="_blank" style="line-height: 1;"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div class="d-flex flag-icon text-center me-2">
          <a role="button" class="cgds btn" href="">
            <img src="/assets/uncompressed_images/cambodia-flag-icon.svg" width="32px" height="24px" alt="Home">
          </a>
        </div>
        <nav aria-label="social-media" class="social d-lg-block me-1">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <span class="cgds-line"></span>
            </li>
          </ul>
        </nav>
        <nav aria-label="social-media" class="social d-flex me-3">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <a class="nav-link" aria-current="page" href="">
                <i class="bi bi-person-circle" target="_blank" style="line-height: 1;"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div class="mobile-toggle d-flex align-items-center d-lg-none">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavExample2"
            aria-controls="navbarNavExample2" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
          </button>
        </div>
      </div>
    </header>
    <div class="px-4 px-md-5">
      <div class="collapse navbar-collapse px-4 px-md-5" id="navbarNavExample2">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="">Link</a>
          </li>
          <li class="nav-item cgds dropdown">
            <a class="nav-link cgds dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Dropdown <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="">Action</a></li>
              <li><a class="dropdown-item" href="">Another Action</a></li>
              <li><a class="dropdown-item" href="">Something</a></li>
              <div class="dropdown-divider"></div>
              <li><a class="dropdown-item" href="">Seperated Link</a></li>
            </ul>
          </li>
          <li class="nav-item cgds dropdown has-megamenu">
            <a class="nav-link cgds dropdown-toggle" href="#" id="megamenu" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              Megamenu<i class="bi bi-chevron-down"></i>
            </a>
            <div class="dropdown-menu megamenu p-3" aria-labelledby="megamenu">
              <div class="d-flex justify-content-start">
                <div>
                  <b>Co-create innovative digital solutions with the Government</b>
                  <p>Discover events, blogs, open-source technologies and other collaboration opportunities</p>
                </div>
                <div>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="search-bar d-flex align-items-center ms-auto">
          <form class="w-100" action="">
            <div class="search-wrapper d-flex ps-2">
              <input type="text">
              <button>
                <i class="bi bi-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>
  <div class="p-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Nunc sed augue lacus viverra vitae congue eu. Aliquet enim tortor at auctor urna nunc id
      cursus. Aliquam id diam maecenas ultricies. Tempus iaculis urna id volutpat lacus laoreet non. Mauris
      ultrices eros in cursus turpis massa. Magna etiam tempor orci eu lobortis elementum. Semper quis lectus
      nulla at volutpat diam ut venenatis. Elit eget gravida cum sociis. Erat velit scelerisque in dictum non.
      Ipsum consequat nisl vel pretium lectus quam id. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus.
      Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Interdum velit euismod in pellentesque massa.
    </p>
    <p>Et pharetra pharetra massa massa ultricies mi quis. Velit scelerisque in dictum non consectetur a erat.
      Tellus molestie nunc non blandit massa enim. Sit amet nisl suscipit adipiscing bibendum est ultricies
      integer. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Tristique senectus et netus et
      malesuada fames ac turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. A
      diam sollicitudin tempor id eu nisl nunc. Lorem ipsum dolor sit amet consectetur. Morbi quis commodo odio
      aenean. Et ultrices neque ornare aenean euismod elementum nisi quis. Cras pulvinar mattis nunc sed blandit.
      Ut faucibus pulvinar elementum integer enim neque volutpat. Amet nisl purus in mollis nunc sed id semper.
      Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Eget gravida cum sociis natoque
      penatibus et. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Elit sed vulputate mi
      sit. In hac habitasse platea dictumst. Nec dui nunc mattis enim ut tellus.</p>
    <p>Viverra nibh cras pulvinar mattis nunc sed blandit libero. Gravida arcu ac tortor dignissim convallis aenean
      et tortor at. Accumsan sit amet nulla facilisi morbi tempus iaculis. In ante metus dictum at tempor commodo
      ullamcorper a. Pharetra et ultrices neque ornare. Sit amet facilisis magna etiam tempor orci eu. Malesuada
      proin libero nunc consequat interdum. Magna fermentum iaculis eu non diam phasellus vestibulum. Nisi est sit
      amet facilisis magna etiam tempor orci. Duis ut diam quam nulla porttitor. Commodo viverra maecenas accumsan
      lacus vel facilisis. Nibh venenatis cras sed felis eget velit aliquet sagittis. Magna fermentum iaculis eu
      non diam phasellus vestibulum lorem. Diam vel quam elementum pulvinar etiam. Vitae nunc sed velit dignissim
      sodales ut.</p>
  </div>
</div>

        

Anatomy

Label: Serve to tell the user what the page/item is about.
Indicator: Used when it is active, this allows the user to know what page/item they are on.
Icon (situational): Used when there are subitems.

Spacing

Within the main navigation
Ensure that there is a min of 12px spacing between label and icon.

Outside the main navigation
Ensure that there is a min of 24px spacing horizontally between each main nav item.

Usage guidelines

Main navigation should be used:

All government websites must include:

Logo or site name.
Your site's primary navigation.

Usability guidelines

Highlight the current section
Show users where they are by highlighting it in the navigation bar, so they know which section they are currently in. If the page they are in is hidden in the dropdown menu, you can still highlight the parent page in the main navigation.

Use straightforward labels
Labels should be clear to your users. You should avoid jargon or unfamiliar terms that users cannot understand.

Keep responsiveness in mind
When designing the main navigation, think about how it scales down for mobile or scales up for desktop. In a desktop navigation bar, you should be able to see the essential pages, whereas on mobile, you should be able to collapse the pages under a hamburger (three bars icon) menu.

Main Navigation design tokens

$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-font-size: null !default;
$nav-link-font-weight: null !default;
$nav-link-color: $link-color !default;
$nav-link-hover-color: $link-hover-color !default;
$nav-link-transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$navbar-padding-y: $spacer * 2 !default;
$navbar-mobile-padding-y: $spacer !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-border-bottom-height: .125rem !default;
$navbar-brand-font-size: $font-size-lg !default;
$nav-link-height: $font-size-base * $line-height-base+$nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;

Main Navigation

Example

Default main navigation

Navigation with User

Anatomy

Spacing

Usage guidelines

Usability guidelines

Main Navigation design tokens

Example

Default main navigation

See Code

Navigation with User

See Code

Anatomy

Spacing

Usage guidelines

Usability guidelines

Main Navigation design tokens