Skip to main content

Basic Floating menu#

Below is an example of a floating menu which gets activated when you select something. Bangle picks some reasonable default menu types, but you are free to customize it as shown in the next example.

Try some of the following:

  • Try selecting some lines.
  • Try to Bold the text.
  • Click on the link to see a link editor.
  • Select some text and try Command–k(Mac) or Ctrl-k(PC) to add a link.
  • Copy a link and try pasting it directly on a selected text.

Customizing menu buttons#

If you are not happy with the buttons, you can customize the the menu buttons as shown below

Customizing floating menu type#

In the example below we define a custom menu type headingSubMenu, which gets activated when a user is inside a heading node.

It is totally up to you on how you define a type in calculateType and what you render for that type, see renderMenuType.

Changing the tooltip style#

In this example, the expressive nature of Bangle's API really starts shining ☀️! We create a medium style menu by changing the direction of tooltip to right and triggering it on a new line.

Try some of the following:

  • Create new line by pressing enter to see the menu show up.
  • Secret tip: You can use Command-Enter (Mac) or Ctrl-Enter (PC) anywhere in Bangle create a new paragraph below without worrying if you are at the end of line or not. Add a shift to it, to create one above.
  • Also, see the menu activate whenever you create a new empty node like Heading, TodoList, BulletList etc.

Menu Dropdown#

In the example below we build a dropdown menu which allows us to change the node type.

See API docs: