Compare with the design specimen https://design.gridonic.io/bruno-weber-lab/ui/specimens/site-header/second/ (option, not used on the design pages).

Large: the entry "Testing" has a second level. Hover, keyboard focus or the caret button opens a band under the bar with the label and the sub-links as tiles (four per row, yellow on hover). The caret turns 180°. Escape or leaving the entry closes it.

Small: the sub-links are listed under "Testing" in the menu.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.

Filler text so the page is long enough to test the header: scroll down past 160px and it slides away; scroll up and it returns on a solid paper bar; back at the top it lies flat again.

With prefers-reduced-motion (or ?preview) the header stays where it is and simply scrolls with the page.