shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Post Header Block for Vue
An essay's header with a breadcrumb trail whose collapsed middle opens a menu of the parents it hides, the title, a dek and a byline band with the author, date and reading time.
Installation
Overview
The header of a single essay for Vue with Ark UI, written for Longshore, an essay journal about coastlines. A breadcrumb trail sits over the title: Journal, a collapsed middle, Long-form, and the post itself. The ellipsis in the middle is a button that opens a menu of the two parents it hides, so the path never wraps and every parent stays one choice away; the current page is plain text that is cut short with an ellipsis when the line is full. Under the title and a one-sentence dek, a byline band on its own hairline holds the author's initials, the fixed publication date, the reading time and the category. It follows your theme and draws only type and rules, so it sits above any article body. It's built from Breadcrumb, DropdownMenu, Avatar, Badge, Button and Guides, with CSS for the entrance.
FAQ
How do I change the trail?
Edit ROOT, HIDDEN and SECTION at the top of the file, and the POST object for the title, dek, author, date and reading time. HIDDEN is the list of parents the ellipsis folds away, outermost first; the menu and its accessible name ("Show Essays and Coastlines") are built from it. The trail is a navigation landmark labelled Breadcrumb, and the current page is not a link.
How does the collapsed middle work?
The ellipsis is a ghost icon button with a name that lists what it hides. It opens a menu of links, one per hidden parent, and Escape closes it and returns focus to the button. The middle stays collapsed at every width, which keeps the line short on a phone and quiet on a desktop. To show every parent on wide screens, render the hidden links as breadcrumb items from md and keep the menu for smaller screens, as the breadcrumb banner does.
What happens to a long title in the trail?
The last crumb is the only one that shrinks: it truncates with an ellipsis, while the title in full is the heading right under the trail. Nothing wraps and nothing scrolls sideways, down to a 320 pixel screen.
Are the date and the reading time live?
No. The date is fixed text in the data, written as an ISO string and formatted in UTC so the server and the browser print the same day, and the reading time is a number you set. Nothing is computed from today.