Positioning toolbars - chrisgurney/obsidian-note-toolbar GitHub Wiki

Choose the position of the toolbar, on desktop and mobile (i.e., phone and tablet).

[!tip] Right-click on a toolbar (long press on mobile) for quick access to Position options.

[!note] Positioning items left/right/center within a toolbar are done when styling toolbars.

Top (fixed)

Fixes the toolbar to the top of the editor window, above the note's title, regardless of the scroll position.

Below Properties

Places the toolbar below the note's Properties.

  • If there are no Properties, the toolbar is placed where the properties would be (below your note's title, if they're configured to show).
  • Use this position, in combination with the sticky style (in Editing/Source mode), to stick the toolbar to the top of the editor view on scroll.

Bottom

Fixes the toolbar at the bottom of the editor window, regardless of the scroll position.

[!tip] Adjust distance from the bottom, left/right padding, and border radius using the Style Settings plugin or by changing CSS variables.

Limitations / Known issues:

  1. Toolbars with breaks have a gap on the right side (equivalent to the size of the wrapped items).
  2. Bottom toolbars + Floating buttons: On mobile, the built-in toolbar disappearing makes it hard to use certain toolbar items (e.g., select text โ†’ bold).

Floating button

Adds a button that floats over your content in the lower left or right corner of the editor. When clicked it displays a menu containing the items in your toolbar.

Notes:

  • Change the toolbar icon in settings.
  • Make adjustments to the button with the Style Settings plugin, including the precise position of the button.
  • How toolbar items are shown in the "toolbar menu":
    • Each item in the menu consists of the itemโ€™s icon, the label, or if the labelโ€™s blank, the tooltip.
    • Remember that the Show "Edit toolbar" link in toolbar menus setting can be enabled to add an item to edit the toolbar, if needed.

[!tip] Use tooltips to add text to in menus, while keeping the toolbar simple, if you would prefer not to use labels. Note that even if the icon or label is set to hidden for both desktop and mobile, it will still be shown in the menu.

Floating button default item

Set a Floating button default item to show an item which will execute when clicked/tapped. To get access to the toolbar's items, right-click on the button (or long-press on mobile).

[!tip] Consider using this with a floating button in the "New tab" view and scripting, to create a convenient launching point for your vault.

Notes:

  • The setting appears only when a floating button position is set for either the desktop or mobile.
  • The icon for the item will be shown if one is set, otherwise it will use the toolbar's icon.
  • Remember that the Show "Edit toolbar" link in toolbar menus setting can be enabled to add an item to edit the toolbar, if needed.

Nav bar access (mobile only) ๐Ÿ“ฑ

Your toolbars are also available from the nav bar (ribbon) on mobile. To add Note Toolbar to your navigation bar:

  1. In the mobile app, go to Obsidian settings: Appearance โ†’ Ribbon menu โ†’ Manage
  2. Set the Quick access ribbon item to Note Toolbar.

Notes:

  • Items completely hidden on mobile will not appear in this menu.
  • You can change the icon in settings.

[!tip] Adding the toolbar to the nav bar might be a clean option to access your toolbar from a canvas on mobile (based on where the canvas file is located and your folder mappings).

Read more about Navigation bar access.

Editing bar access (mobile only) ๐Ÿ“ฑ

On mobile, you can also access the current toolbar from Obsidian's mobile toolbar. Here's how to set it up:

  1. Settings โ†’ Toolbar โ†’ scroll to the bottom of Manage toolbar options โ†’ Add global command
  2. Select the Note Toolbar: Open Quick Tools (for current toolbar) command.

When using that item, it will open a Quick Tools window that shows the items in the toolbar associated with the current note.

Hidden

Completely hide the toolbar on that platform.

[!tip] Set your toolbar to Hidden and add Note Toolbar to the nav bar, for a more minimal way to access your toolbars, on mobile.

Read next: Styling toolbars