Skip to content

Brutal Mega Menu

A neo-brutalist bar whose menu is a full-screen index that cuts in and out in one frame: huge section rows between 3px rules, a hard inverted selection, links and a feature card beside it.

ProBrutalismbrutalistplayful

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Ship the rough draft today.

Props

Open
Contained
No runtime dependencies
"use client";

import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";

/**
 * BrutalMegaMenu — a neo-brutalist navigation bar whose menu is a full-screen
 * index that cuts in and out in a single frame.
 *
 * No slide, no fade, no blur, no stagger: pressing Menu replaces the screen
 * with the index, and Close (or Escape) takes it away, instantly. The index
 * lists the site's sections in huge type between 3px rules. The selected
 * section is a hard inverted box (ink ground, cream type), and its links and
 * a feature card sit beside it; pointing at a row, or moving to it with the
 * arrow keys, swaps them at once (a keyboard user's focus follows the pointer).
 * On a phone the links open under their row.
 *
 * Keyboard: Up and Down move between sections (Home and End jump), Right or

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this component

A menu that refuses to animate. Press Menu and the screen is replaced, in one frame, by an index of the site: each section a full-height row in huge heavy type between 3px rules, with its number in mono. The selected section is a hard inverted box, ink ground and cream type, and beside it sit that section's links with short notes and a feature card in the accent. Point at another row, or move to it with the arrow keys, and everything swaps at once. Close, or Escape, cuts back to the page. It is built as a real modal: the section rows are a roving list (Up and Down, Home and End), Right moves into the links and Left back, Tab cycles inside the menu, focus returns to the Menu button on close, and in page mode the page behind stops scrolling. On a phone the links open under their row instead. The bar itself carries the brand, plain links, Sign in, a press-button CTA and the Menu button, each appearing as the container widens. A contained mode keeps the menu inside its own box for fixed-height frames.

Curator’s note

Part of the Brutalism kit, drop 3, phase 11: the kit's navigation. Pro, unlike most drops' navigation, because it is a stateful modal system: a roving section index, a linked detail column, a focus trap, focus return, a scroll lock and a phone accordion.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

A full-screen menu set like a printed index — numbered entries in heavy type, and a treated photo plate that wipes in the direction you travel.

navigationmenuoverlay
NewPro

A reorderable neo-brutalist deck where cards lift onto their shadows, travel in straight lines and land exactly. Drag, shuffle or move with the keyboard; ranks stamp as cards land.

reorderdrag and dropshuffle

Site navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.

navigationnavbarmega menu