Using Named Containers for Targeted Queries

Explore the use of multiple named containers for flexible visibility control in product site navigation.

We can extend the idea of coordinating visibility by using multiple named containers for maximum flexibility.

Implementing a product site navigation using named containers

A product site navigation is an excellent component for demonstrating this concept. We’ll define two containers and use the second container property of container-name to be more explicit about attaching query styles.

The outer elements will be a container named “navigation.” And the page navigation list area will be a container named “menu.”

This will enable us to switch the navigation list to a button that will trigger a drop-down on a reduced width, based on the menu container. And on our narrowest width, we’ll reduce the company brand to just the logomark.

Get hands-on with 1200+ tech skills courses.