78 of 300

Navigation 78

Bar layout: Notch

At rest only a small capsule with the wordmark. Move the pointer up toward it and the capsule opens from the middle and shows the menu. Move away and it closes. The opening follows the distance continuously.

A capsule opened by the distance of the pointer, with clip-path

  • WhyThe smallest bar at rest and the full bar when it is needed. The shape is known from the notch on phones, but here the attention model drives it.
  • RiskThe menu is hidden at rest, so the first second does not show what the site holds. Keyboard focus opens it fully.
  • Techniqueclip-path: inset() driven by a custom property, with the shadow as a drop-shadow on the parent, so it follows the clip.