Menubar examples

Default example

With mixed parameters

Has Selection in parent items

When a selection has been made in any children, the parent item could be colored.

With one disabled parent item

With one active parent item


Using modifier classes in items.


Using modifier classes in items


In special cases, a special fixed header with a menubar could be useful. If you need a navigation menu with links, use the component Menu navigation instead.

Filter example

Used over a list of items to filter and order them. Using .c-menubar--last-right modifier to position last item to right over lg: breakpoint.

With label example

With label that explains this menu acts to other element. You can use classes: sr-only to show only for screen readers.

Label text goes here