shadcn.io is not affiliated with official shadcn/ui
Tabbed Open Menu Blog Block for React Aria
A blog's menu drawn as a framed section: Tabs for Topics, Series and Authors over three columns of links with counts, the most-read posts and a featured tile with a typographic cover.
Installation
Overview
A mega-menu block for React with React Aria, written for the Wharfside Review, a port-city magazine, and drawn as a section, never as a navbar. A start-aligned header sits over a framed panel. Along its top, Tabs styled as menu triggers (Topics, Series, Authors); under them three columns behind dividers: a list of links with their counts, the three most-read posts as an ordered list, and a featured tile with a typographic cover and one stretched link. Each tab holds its own links, posts and tile, and a link to every post closes the frame. It's built from Tabs, Badge and Guides. The cover is drawn, never a photo, and every link goes to #.
FAQ
Does the panel change height when I switch tabs?
No. Every tab's columns sit in one grid cell with the unseen ones hidden and inert, so the frame is as tall as the tallest and nothing below it moves.
How does the keyboard work?
The three triggers are a tab list: the arrow keys move between them, Home and End jump to the first and last, and Tab moves into the panel.
How do I change the menu?
Edit TABS at the top of the file: each tab has its label, a heading over the links, the links with their counts, three popular posts and one feature (title, dek, author, category, an ISO date, minutes and the words or numeral its cover sets in display type). The counts' unit ("posts" or "parts") is the tab's counts.
Is the featured cover a picture?
No. It is drawn from the post's own words or numeral in display type, under a masthead rule and the issue number, sized in container units so it scales with the tile. It is artwork, so an RTL page does not mirror it. To use a photo, replace the cover's inner content with an image.