CSS Navigation & Menus Effects

Pure-CSS hamburger menu using the checkbox hack — three lines morph into an X with no JavaScript.

A segmented pill tab control with a floating indigo indicator that snaps to the selected option via :has().

A native <details>-based dropdown that animates open, with arrow rotation and hover-highlighted menu items.

A breadcrumb trail with chevron separators that nudge forward on hover, and a bolded current page.

Slate pill nav with the active item highlighted in blue.

Inline nav with active item marked by an ocean gradient underline.

Frosted floating dock whose icons spring up and take on the ocean gradient under the pointer.

Sticky-header pill navigation on a blurred translucent bar, with a blue active state.

Docs breadcrumb with CSS-drawn chevrons and a blue current page.

Frosted mobile tab bar where the active item takes an ocean tint and lifts its icon.

Vertical nav whose active marker grows from the centre out, so hover and selected read as the same gesture at two lengths.

Page links with an elided middle and tabular numerals, so widths stay even from page 2 to page 18 and the control never reflows.

Compact product header carrying mark, search, links and account in one blurred row, the search flexing so the ends stay pinned at any width.

Three-column link map under a gradient border-image rule, each link underlining from its leading edge so the columns stay quiet until something is pointed at.

Nav split by labelled section with the active row marked by a rail bleeding past the panel padding, so the indicator belongs to the sidebar rather than the item.

Stacked menu rows where hovering sweeps a teal tint bar across the row and slides an arrow into place.

Hamburger button that morphs into a close icon while sliding a navigation drawer in from the left, driven entirely by a checkbox.

Manila-folder tabs stacked at different depths where the selected one rises to the front and paints over the pane border so tab and panel read as a single sheet, while the others sit sunk behind until hovered.

Dropdown panel opening on hover and on `:focus-within`, so it is reachable by keyboard, with `visibility` transitioned so it is not tabbable while faded out.

Right-click menu with a rule between groups and each item's binding right-aligned, dimmed until the row is hovered so the shortcuts do not compete.

Segmented flow header where each step's arrow is a rotated square inheriting its own background, so the notch always matches the segment behind it.

Language menu listing each option in its own script rather than in the current one, with the ISO code trailing so the list stays scannable to someone who cannot read the endonym.

Mobile tab bar whose primary action sits raised in the middle, punched out of the bar by a ring shadow in the bar's own colour rather than by a real cut-out.

Docs-style on-this-page list where the indigo rail marker jumps to whichever heading is hovered.

Menu row with a chevron that opens a second-level panel alongside it, sliding in from behind the parent on hover.

A menu printed on the four sides of a solid cube standing on a lit floor, which turns a full quarter on hover so the next section swings round to face you and the current one rotates away.

A fuchsia hub button that spins into an X while four actions fan out along an arc on hover.

Nine-dot launcher button that springs open a grid of coloured app tiles anchored to its top-left corner.

A master list that slides a short way left and dims as the detail panel it points at pushes in from the right edge with a back chevron, the two levels moving together like a phone navigation stack.

Horizontal nav where hovering the Products link drops a sky-outlined panel of sub-links into view.

Narrow icon rail that widens on hover to bring its labels in from the left, keeping the active row highlighted throughout.

A file tree with indent guide lines down each branch, where the collapsed folder turns its caret a quarter and rolls its children open along the guide while the tree grows to make room.

Slanted parallelogram tabs where the orange fill wipes out of the active tab and into the hovered one.

Full-page style side dots that stretch into a lime bar and brighten their numbered label on hover.