Main Navigation

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

Example

Default main navigation

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.

HTML React Web Component 
<div style="height: 300px" class="overflow-auto">
    <nav class="sgds navbar navbar-expand-lg">
        <a class="navbar-brand" href="#">
            <img src="/assets/img/logo-sgds.svg" alt="Home" height="60">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <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 sgds dropdown">
                    <a class="nav-link sgds 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 sgds dropdown has-megamenu">
                    <a class="nav-link sgds 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>
    </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>
 View on React storybook View on Web component storybook

Always expanded

For navbars that never collapse, add the .navbar-expand class on the navbar.

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.

HTML React Web Component 
<div style="height: 300px" class="overflow-auto">
    <nav class="sgds navbar navbar-expand">
        <a class="navbar-brand">
            Always Expanded
        </a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <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 sgds dropdown">
                    <a class="nav-link sgds 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 sgds dropdown">
                    <a class="nav-link sgds 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 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>
    </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>
 View on React storybook View on Web component storybook

Always collapsed

For navbars that always collapse, don't add any .navbar-expand class.

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.

HTML React Web Component 
<div style="height: 300px" class="overflow-auto">
    <nav class="sgds navbar">
        <a class="navbar-brand">
            Always Collapsed
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <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 sgds dropdown">
                    <a class="nav-link sgds 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 sgds dropdown">
                    <a class="nav-link sgds 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 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>
    </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>
 View on React storybook View on Web component storybook

Responsive behaviors

Navbars can use .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their content collapses behind a button.

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.

HTML React Web Component 
<div style="height: 300px" class="overflow-auto">
    <nav class="sgds navbar navbar-expand-sm">
        <a class="navbar-brand" href="#">
            Breakpoint-sm
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <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 sgds dropdown">
                    <a class="nav-link sgds 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 sgds dropdown has-megamenu">
                    <a class="nav-link sgds 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>
    </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>
 View on React storybook View on Web component storybook

Sticky top

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.

HTML React Web Component 
<div style="height: 300px" class="overflow-auto">
    <nav class="sgds navbar navbar-expand-lg sticky-top">
        <a class="navbar-brand">
            Sticky Top
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <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 sgds dropdown">
                    <a class="nav-link sgds 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 sgds dropdown">
                    <a class="nav-link sgds 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 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>
    </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>
 View on React storybook View on Web component storybook

Anatomy

Main Navigation Anatomy
  1. Label: Serve to tell the user what the page/item is about.
  2. Indicator: Used when it is active, this allows the user to know what page/item they are on.
  3. Icon (situational): Used when there are sub items.

Spacing

Main Navigation Spacing

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

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

Usage guidelines

Main navigation should be used:

  • On all government websites. It must include:
    1. Logo or site name.
    2. You 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 (3 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;
Last updated 02 October 2024
Home
Latest version 2.3.5