Note Toolbar Callouts

Add toolbars within your notes using Note Toolbar Callouts. Note Toolbar Callouts allow for flexibility, and using other plugins (e.g., Templater, Dataview) to generate the contents of the toolbar.

Get started writing your own by creating a callout containing a list of links, like the below, or learn about creating callouts from toolbars.

> [!note-toolbar]
> - [Some Website](https://google.com)
> - [Some Command](obsidian://...)
> - [[Some Note]]

Read on for the syntax.

Line breaks and separators

For separators use <hr/> and for line breaks use <br/>:

> [!note-toolbar]
> - [Item before line break](...)
> - <br/>
> - [Item after line break](...)
> - [Item before separator](...)
> - <hr/>
> - [Item after separator](...)

Styling

To control its appearance, optionally add metadata by adding a | and then list styles (as defined in the table below), separated with spaces or a character (the example below uses -).

For example, here's the above callout with three styles applied:

> [!note-toolbar|border-right-sticky]
> - [Some Website](https://google.com)
> - [Some Command](obsidian://...)
> - [[Some Note]]

Style metadata

Below is a complete list of style callout metadata you can use in Note Toolbar callouts. For visual examples of each, see how style are applied.

To add your own styles, see Custom styling.

Default Style	Mobile Style	Description
border	mbrder	Adds a top and bottom border
noborder	mnbrder	Turns off border (default)
button	mbtn	Applies a button-like appearance
center	mctr	Aligns items center
between	mbtwn	Spreads items out edge to edge
even	mevn	Distributes items evenly, keeping them centered
floatl	mfltl	Floats the toolbar left of nearby content within a callout
floatr	mfltr	Floats the toolbar right of nearby content within a callout
nofloat	mnflt	Turns off float (default)
left	mlft	Aligns items left (default)
right	mrght	Aligns items right
sticky	mstcky	Sticks toolbar to top on scroll. ⚠️ Note: Sticky Note Toolbar Callouts may disappear when scrolling through a long note; see this note for details.
nosticky	mnstcky	Turns off stickiness (default)
n/a	mnwrp	Mobile only: When set, all items will be on one line making the toolbar horizontally scrollable. ⚠️ For this to work best, ensure your items are left-aligned (i.e., not centered or evenly spaced).

Tip

Hovering over a style in settings will show you the metadata to use in your callout, from the above list:

Adding icons

The Iconize ↗ plugin allows you to add icons to your notes, and works well in callouts. For example:

>[!note-toolbar]
> - [:LiPin: Pin note](<obsidian://note-toolbar?commandid=workspace:toggle-pin>)

...appears as:

Open menus, execute commands, focus on folders

Two methods are available to add menus, execute commands, and focus on folders from callouts:

Note Toolbar URIs

Note Toolbar URIs can be used within links, like this:

> [!note-toolbar]
> - [Command URI](obsidian://note-toolbar?command=workspace%3Atoggle-pin)
> - [Folder URI](obsidian://note-toolbar?folder=Demos)
> - <hr>
> - [Menu URI](obsidian://note-toolbar?menu=Tools)
> - [Menu URI with ID](obsidian://note-toolbar?menu=7fb30215-d92c-43ce-8158-b79096672bd1)

Tip

Get a Note Toolbar URI for a command using the Note Toolbar: Copy URI for command command.

Note:

• URIs don't appear to work in notes that were opened in a new window, as the focus is returned to the main window on click. If that's not suitable for you, use the next method.

Data elements

Note Toolbar data elements are appended to the end of an empty link, like this:

> [!note-toolbar]
> - [Command]()<data data-ntb-command="workspace:toggle-pin"/>
> - [Folder]()<data data-ntb-folder="Demos"/>
> - <hr>
> - [Menu]()<data data-ntb-menu="Tools"/>
> - [Menu with ID]()<data data-ntb-menu="7fb30215-d92c-43ce-8158-b79096672bd1"/>

Tip

Get a callout item for a command using the Note Toolbar: Copy callout item for command command.

Demo:

Notes:

• The folder, menu, and command types require empty links (), or Obsidian will open the link content instead.
• Ensure the <data> element is closed (i.e., ends with a />).
• These links work in new windows opened from a note as well, unlike obsidian:// URIs which seem to return focus to the main window.

Notes for both methods

• A message is displayed if the provided command, folder, or URI is invalid.
• For menus, you can pass in the toolbar name or the UUID, as shown above.
• For commands:
  • You can use either command= or commandid= as both work the same.
  • URIs must be encoded (e.g., : becomes %3A) or you can surround the Obsidian URL with < and >.
  • Use one of the commands mentioned to easily get the URI or data element:
    • Note Toolbar: Copy URI for command
    • Note Toolbar: Copy callout item for command

Examples

Use Note Toolbar Callouts anywhere in your notes, including within other callouts. Below is an example with the styles that are applied:

Here's another example that shows your bookmarks, thanks to Dataview.

Read Next: Creating callouts from toolbars