Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the flex display and is customizable with all the flexbox properties. It's required to be used with the native HTML <nav> element to ensure an accessible experience by default.
The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
A navbar can be contained to a specific width by using <daff-container>. View Container Documentation The layout styles for the navbar will be passed down to the container by utilizing the daffManageContainerLayoutMixin.
The raised property adds elevation to a navbar. To enable it, set the raised property on <nav daff-navbar>.
Daffodil enforces the usage of the native <nav> HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the aria-labelledby attribute.
<nav daff-navbar aria-labelledby="main-navigation">
<!-- navigation items -->
</nav>
<footer>
<nav daff-navbar aria-labelledby="footer-navigation">
<!-- navigation items -->
</nav>
</footer>