shadcn.io is not affiliated with official shadcn/ui
Tabbed Open Menu Blog Block for React
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 Base UI, 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.
Related
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- Pro
Directory Blog
Topics and indexesA map blog's A to Z index as a framed command palette: twenty-four posts grouped by the letter they start with, a filter field, arrow keys, a count and key hints at the foot.
- Pro
Tag Cloud Blog
Topics and indexesA foraging blog's tag cloud: fourteen tags in five sizes derived from their post counts, each a toggle that lists its three latest posts in a fixed-height panel beside the cloud.
- Pro
Editorial Category Menus Navbar
Mega menusA one-bar navbar for a long-form publication whose five category triggers each open a small panel of that category's three latest pieces, with reading times as outline badges and an All stories link, and accordion groups in a sheet on phones.
- Pro
Post Rows With Sidebar Blog
Post listsA reading layout: five post rows with small drawn route maps at the start, and behind a divider a sidebar of topics with counts, a numbered most-read list and the archive by year.
- Pro
Featured Post Blog
Featured storyOne lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.