143 lines
3.1 KiB
Markdown
143 lines
3.1 KiB
Markdown
# Obsidian Menus
|
||
Create simple, stylable menus from code blocks. Write links inside a menu code block, and the plugin renders a clean set of clickable items.
|
||
|
||
## Quick Start
|
||
Create a menu using the menu code block:
|
||
|
||
```markdown
|
||
```menu
|
||
layout: default
|
||
[[Home]]
|
||
[[Projects|My Projects]]
|
||
[Google](https://google.com)
|
||
[Documents](file:///C:/Users/YourName/Documents)
|
||
```
|
||
```
|
||
|
||
The plugin supports three link types:
|
||
- Internal: `[[Note]]` or `[[Note|Alias]]` opens notes in Obsidian
|
||
- Web: `[Text](https://example.com)` opens in your browser
|
||
- File: `[Text](file:///C:/path/to/file)` opens local files or folders
|
||
|
||
## Built-in Templates
|
||
|
||
Choose from five pre-styled layouts:
|
||
|
||
- `default` — balanced, general-purpose design
|
||
- `minimal` — clean and understated
|
||
- `slate` — darker theme with subtle borders
|
||
- `horizon` — horizontal emphasis with gradients
|
||
- `aether` — light and airy aesthetic
|
||
|
||
Add extra classes after the layout name:
|
||
|
||
```code
|
||
layout: horizon wide
|
||
[[Dashboard]]
|
||
[Resources](https://example.com)
|
||
```
|
||
|
||
## Custom Styling
|
||
|
||
Use your own CSS class to bypass the built-in templates entirely. The plugin only renders the HTML structure and inline CSS variables—no default styles apply.
|
||
|
||
|
||
```code
|
||
class: my-menu
|
||
bg: #111
|
||
text: #eee
|
||
hover-text: #0af
|
||
|
||
[[Home]]
|
||
[Web](https://example.com)
|
||
```
|
||
|
||
Then create your own CSS snippet:
|
||
|
||
```css
|
||
.menu-container.my-menu {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.menu-container.my-menu a {
|
||
padding: 0.5rem 0.8rem;
|
||
border-radius: 6px;
|
||
color: var(--text, var(--text-normal));
|
||
background: var(--bg, transparent);
|
||
}
|
||
|
||
.menu-container.my-menu a:hover {
|
||
color: var(--hover-text, var(--text-accent));
|
||
background: var(--hover-bg, transparent);
|
||
}
|
||
```
|
||
|
||
## Style Variables
|
||
|
||
Override colors and fonts using YAML-like variables inside the code block. Only these whitelisted properties are supported:
|
||
|
||
**Global variables:**
|
||
- `bg` — background color for buttons
|
||
- `text` — text color
|
||
- `border` — border color
|
||
- `font` — font family
|
||
- `hover-text`, `hover-bg`, `hover-border`, `hover-font` — hover state styles
|
||
|
||
**Per-link-type variables:**
|
||
|
||
Prefix any global variable with `internal-`, `external-`, or `file-` to target specific link types:
|
||
|
||
```code
|
||
layout: minimal
|
||
internal-text: #00ff00
|
||
external-text: #ff6600
|
||
file-text: #0066ff
|
||
|
||
[[Internal Link]]
|
||
[External Link](https://example.com)
|
||
[File Link](file:///C:/Documents)
|
||
|
||
```
|
||
|
||
**Accepted formats:**
|
||
- Colors: hex (`#1a1a1a`), rgb, hsl, CSS variables (`var(--text-accent)`), gradients
|
||
- Fonts: plain names or quoted for spaces (`font: "Work Sans"`)
|
||
|
||
## Dataview Integration
|
||
|
||
Generate links dynamically from Dataview queries. Prefix your query with `dataview:` or `dv:`:
|
||
|
||
```code
|
||
layout: default
|
||
[[Home]]
|
||
dataview: LIST FROM "Projects"
|
||
```
|
||
|
||
The plugin unwraps Dataview results so links blend seamlessly into your menu layout.
|
||
|
||
## Examples
|
||
|
||
Template with gradient background:
|
||
|
||
```code
|
||
layout: horizon
|
||
bg: linear-gradient(45deg, #667eea, #764ba2)
|
||
text: white
|
||
hover-text: #ffd700
|
||
|
||
[[Dashboard]]
|
||
[Projects](https://github.com)
|
||
```
|
||
|
||
Custom class with theme variables:
|
||
|
||
```code
|
||
class: my-toolbar
|
||
text: var(--text-normal)
|
||
hover-text: var(--text-accent)
|
||
|
||
[[Inbox]]
|
||
[Wiki](https://example.com)
|
||
``` |