Brand menu
Right-click a logo and, instead of the browser's menu, a dialog offers the brand's own actions.
Right-click me
Features
- A context-menu press on the logo opens a modal dialog of actions instead of the browser menu.
- A plain click still follows the logo's link.
- Actions are buttons or download links; clicking the backdrop closes it.
Use it for
- Brand assets: the name, the mark, a press kit.
On this site
- Every page: right-click the ZKThe name and the monogram, without hunting for them.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
title | string | The dialog heading. |
actions | { label, onSelect? | href, download? }[] | What it offers. |
children | ReactElement | The logo. |
Accessibility
- A native modal dialog: focus moves in and returns; Escape closes.
- It is an extra, never the only way to the assets.
Source
The code is in src/kit/brand-menu.tsx in runets, MIT licensed.