# Collapsible - Vertical Action Menu for MobileScreens (but not only)

**URL:** <https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552>\
**Category:** Tricks & Techniques\
**Created:** [December 30, 2024, 8:16pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552 "2024-12-30T20:16:03Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mr.Red](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mr.red/32/821_2.png) [@Mr.Red](https://community.silverbullet.md/u/Mr.Red)\
**Post date:** [December 30, 2024, 8:16pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/1 "2024-12-30T20:16:03Z")

</div>

I have a lot of action buttons so I needed a solution which doesn’t interfere with the title of the page.

So I was playing around with the space-style and made this modification for mobile devices

Screenshots with the collapsible Vertical Menu:

Collapsed Action Menu:

 ![image](https://community.silverbullet.md/uploads/default/original/1X/685b2122d960b5064dc7da169d7878e3866a2c0f.png)

Opened Action Menu when hovering(desktop) or clicked (mobile):

Dark Mode:

 ![image](https://community.silverbullet.md/uploads/default/original/1X/da860af35e8db75bc2c30622ce2d782ea233b427.png)

Light Mode:

 ![image](https://community.silverbullet.md/uploads/default/original/1X/5c6a97ec933f842c87e5a39a6baf0094891b9fc8.png)

Here the `space-style` code:

```auto
/*Mobile Collapsible Menu*/
@media only screen and (max-width: 600px) {
  #sb-top .sb-actions {
    position: fixed;
    border-radius: 5px;
    border: 1px solid #444 ;
    top: 12px;
    right: 20px;
    width: 2.2rem; /* Collapsed width */
    background: rgba(var(--root-background-color), 0);
    backdrop-filter: blur(8px); /* tinted glass-like blur for the background */
    overflow: hidden; /* Hide overflowing content */
    flex-direction: column; 
    align-items: center;
    z-index: 10; /* Ensure the buttons stay on top */
  }
  /* Button styling */
  .sb-actions button:not(.sb-code-copy-button) {
    display: block;
    height: 1.4rem;
    text-align: center;
    margin: 4px 0;
    padding: 2px 0;
  }

  /* Hide all buttons except the last one */
  .sb-actions a:not(:first-of-type) {
    display: none;   
  }
  /* Show all buttons when hovering */
  #sb-top .sb-actions:hover a {
     display: block;
  }
}

```

for this to work I also use an `empty` action button as the first action button,  
and also recommend hiding the Sync and Edit buttons in the `space-config`:

```auto
hideSyncButton: true
hideEditButton: true

actionButtons:
- icon: more-vertical
  command: "{[]}"
  description: Open Tool Menu

```

If you also want to use this menu on your desktop or your mobile has a wider screen increase the  
`max-width: 600px)` to your liking.

Feel free to share your thoughts or improvements in the comments bellow.

---

<div class="post-metadata">

**Author:** ![mjf](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mjf/32/654_2.png) [@mjf](https://community.silverbullet.md/u/mjf)\
**Post date:** [December 31, 2024, 7:50am UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/2 "2024-12-31T07:50:05Z")

</div>

Nifty! 🚀

---

<div class="post-metadata">

**Author:** ![Mr.Red](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mr.red/32/821_2.png) [@Mr.Red](https://community.silverbullet.md/u/Mr.Red)\
**Post date:** [January 1, 2025, 11:45pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/3 "2025-01-01T23:45:18Z")

</div>

I’ve added a little animation and some shadow effect to the collapsible vertical menu to feel a little bit smoother, and also remove the 1st “Menu Button” when on Desktop/Landscape.

Here’s the Preview:

![menu](https://community.silverbullet.md/uploads/default/original/1X/a5e13347a374fa3530e16ccae9b6ee307efd2fc5.gif)

And here are the modified `space-style` & `space-config`:

`space-style`:

```css
/*. Mobile Collapsible Menu V 1.2 */

/*Hide menu button in Landscape mode*/
@media only screen and (min-width: 600px) {
   .sb-actions a:first-of-type {
     display: none; 
   }
}

@media only screen and (max-width: 600px) {

/* Position the menu relative to .cm-scroller */
  .cm-scroller {
    position: relative; /* This is the positioning context */
}
#sb-top .sb-actions {
  position: absolute; /* Now positioned relative to .cm-scroller */
  top: 3px; /* 12px from the top of .cm-scroller */
  right: 20px; /* 20px from the right edge of .cm-scroller */
  border-radius: 5px;
  border: 1px solid #444;
  width: 2.8rem; /* Collapsed width */
  background: rgba(var(--root-background-color), 1);
  backdrop-filter: blur(20px);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  z-index: 10; /* Ensure the buttons stay on top */
  transition: max-height 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  max-height: 2.2rem; /* Initial collapsed height */
}

  #sb-top .sb-actions:hover {
    max-height: 33rem; /* Expanded height (adjusted for 13 buttons) */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5); /* Smooth shadow on hover */
  }

  /* Button styling and size */
  .sb-actions button:not(.sb-code-copy-button) {
    display: block;
    height: 1.8rem;
    text-align: center;
    margin: 4px 0;
    padding: 4px 0;
  }

  /* Initially hide buttons */
  .sb-actions a:not(:first-of-type) {
    opacity: 0; /* Start as hidden */
    transform: translateY(-5px); /* Slightly shifted upward */
    transition: opacity 0.05s ease-in-out 0.3s, transform 0.3s ease-in-out 0.05s;
  }

  /* Show all buttons with animation when hovering */
  #sb-top .sb-actions:hover a {
    opacity: 1;
    transform: translateY(0);
  }
}

```

`space-config` - for the menu button and hidden Sync&Edit button:

```auto
## UI TWEAKS
hideSyncButton: true
hideEditButton: true 
mobile: false 
  
# Add the "empty"-action button as the first
actionButtons:
- icon: more-vertical
  command: "{[]}"
  description: Open Tool Menu

```

Hope you like it & feel free to give any feedback 😉

---

<div class="post-metadata">

**Author:** ![mjf](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mjf/32/654_2.png) [@mjf](https://community.silverbullet.md/u/mjf)\
**Post date:** [January 2, 2025, 10:19am UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/4 "2025-01-02T10:19:37Z")

</div>

Even niftier! 😃 Nice!

---

<div class="post-metadata">

**Author:** ![dklawren](https://community.silverbullet.md/user_avatar/community.silverbullet.md/dklawren/32/14_2.png) [@dklawren](https://community.silverbullet.md/u/dklawren)\
**Post date:** [January 2, 2025, 3:00pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/5 "2025-01-02T15:00:15Z")

</div>

This is exactly what I was looking for when I filed the issue for Silverbullet at [When viewing Silverbullet on mobile and there are more than a few buttons on the header, the page name is very truncated · Issue #1033 · silverbulletmd/silverbullet · GitHub](https://github.com/silverbulletmd/silverbullet/issues/1033) Maybe we can find a way to make these changes part of the core code base.

---

<div class="post-metadata">

**Author:** ![Mr.Red](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mr.red/32/821_2.png) [@Mr.Red](https://community.silverbullet.md/u/Mr.Red)\
**Post date:** [January 2, 2025, 4:54pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/6 "2025-01-02T16:54:44Z")

</div>

Well until this or similar makes into the core CSS, you can use this in your `space-style` configuration.  
That is what I love the most in silverbullet, that It comes as simple as possible, and you can extend and customize it for your need.

Feel free to use it in your instance, and give feedback if something is still buggy.

---

<div class="post-metadata">

**Author:** ![s-varenia](https://community.silverbullet.md/user_avatar/community.silverbullet.md/s-varenia/32/1115_2.png) [@s-varenia](https://community.silverbullet.md/u/s-varenia)\
**Post date:** [March 15, 2025, 12:48pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/7 "2025-03-15T12:48:53Z")

</div>

Hide menu button in Landscape mode won’t work because there is no `a` tag, in the code there is actually a `button` tag inside the `sb-actions` class.

Correct code:

```css
/*Hide menu button in Landscape mode*/
@media only screen and (min-width: 600px) {
   .sb-actions button:first-of-type {
     display: none; 
   }
}

```

I also recommend changing the background property of the `#sb-top .sb-actions` class from `background: rgba(var(--root-background-color), 1);` to

```css
#sb-top .sb-actions {
  background: color-mix(in srgb, var(--top-background-color) 90%, transparent);
}

```

Because on my mobile device the block was transparent. Because the variable `--root-background-color` is `#fff` (white) and is not an RGB value.

[color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)

---

<div class="post-metadata">

**Author:** ![zef](https://community.silverbullet.md/user_avatar/community.silverbullet.md/zef/32/7_2.png) [@zef](https://community.silverbullet.md/u/zef)\
**Post date:** [March 15, 2025, 4:26pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/8 "2025-03-15T16:26:06Z")

</div>

If somebody would be up for this, I’d very much like to include this in the main distribution of SB. I’m no CSS expert, but the limited horizontal space on mobile is an absolute usability pain for me. If somebody could port this into a PR on the main repo I’d be very grateful.

---

<div class="post-metadata">

**Author:** ![s-varenia](https://community.silverbullet.md/user_avatar/community.silverbullet.md/s-varenia/32/1115_2.png) [@s-varenia](https://community.silverbullet.md/u/s-varenia)\
**Post date:** [March 17, 2025, 1:20pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/9 "2025-03-17T13:20:07Z")

</div>

> [@Mr.Red](#):
>
> `sb-actions`

The `Copy to clipboard` button disappears along with the `Open Tool Menu` button.

You need to add `#sb-top` wherever you change buttons with the `sb-actions` class, since the same class is used for the `Copy to clipboard` button and it disappears too.

**space-style:**

````css
```space-style
/*. Mobile Collapsible Menu V 1.2 */

/*Hide menu button in Landscape mode*/
@media only screen and (min-width: 600px) {
  #sb-top .sb-actions button:first-of-type {
    display: none; 
  }
}

@media only screen and (max-width: 600px) {

  /* Position the menu relative to .cm-scroller */
  #sb-top .cm-scroller {
    position: relative; /* This is the positioning context */
  }
  #sb-top .sb-actions {
    position: absolute; /* Now positioned relative to .cm-scroller */
    top: 3px; /* 12px from the top of .cm-scroller */
    right: 20px; /* 20px from the right edge of .cm-scroller */
    border-radius: 5px;
    border: 1px solid #444;
    width: 2.8rem; /* Collapsed width */
    background: color-mix(in srgb, var(--top-background-color) 90%, transparent);
    backdrop-filter: blur(20px);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    z-index: 10; /* Ensure the buttons stay on top */
    transition: max-height 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    max-height: 2.2rem; /* Initial collapsed height */
  }

  #sb-top .sb-actions:hover {
    max-height: 33rem; /* Expanded height (adjusted for 13 buttons) */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.5); /* Smooth shadow on hover */
  }

  /* Button styling and size */
  #sb-top .sb-actions button:not(.sb-code-copy-button) {
    display: block;
    height: 1.8rem;
    text-align: center;
    margin: 4px 0;
    padding: 4px 0;
  }

  /* Initially hide buttons */
  #sb-top .sb-actions a:not(:first-of-type) {
    opacity: 0; /* Start as hidden */
    transform: translateY(-5px); /* Slightly shifted upward */
    transition: opacity 0.05s ease-in-out 0.3s, transform 0.3s ease-in-out 0.05s;
  }

  /* Show all buttons with animation when hovering */
  #sb-top .sb-actions:hover a {
    opacity: 1;
    transform: translateY(0);
  }
}
```

````

---

<div class="post-metadata">

**Author:** ![Mr.Red](https://community.silverbullet.md/user_avatar/community.silverbullet.md/mr.red/32/821_2.png) [@Mr.Red](https://community.silverbullet.md/u/Mr.Red)\
**Post date:** [March 17, 2025, 1:33pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/10 "2025-03-17T13:33:25Z")

</div>

That would be awesome if someone could do it.  
I’m no github or PR expert either. 😄

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 17, 2025, 2:57pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/11 "2025-03-17T14:57:15Z")

</div>

I wouldn’t mind taking a crack at this later this week. 🙂

---

<div class="post-metadata">

**Author:** ![s-varenia](https://community.silverbullet.md/user_avatar/community.silverbullet.md/s-varenia/32/1115_2.png) [@s-varenia](https://community.silverbullet.md/u/s-varenia)\
**Post date:** [March 17, 2025, 6:51pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/12 "2025-03-17T18:51:09Z")

</div>

I just discovered SilverBullet a week ago 🙂

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 17, 2025, 9:36pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/13 "2025-03-17T21:36:53Z")

</div>

Pull request is open: [feat(menu): Make menu responsive by janssen-io · Pull Request #1298 · silverbulletmd/silverbullet · GitHub](https://github.com/silverbulletmd/silverbullet/pull/1298)  
🙂 Tested it on iOS and it works great!

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 18, 2025, 12:15pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/14 "2025-03-18T12:15:10Z")

</div>

Added an option to also make it appear like a bottom bar:

 ![image](https://community.silverbullet.md/uploads/default/original/2X/7/787167bfd60196590d45434e2454a9a72d3011f3.jpeg)

This is made possible by adding a new setting `mobileMenuStyle`, which has the options:

- `hamburger` (default; use a vertical action menu)
- `bottom-bar` (the bottom bar style you see in the screenshot above)
- `null` (don’t style the menu differently on mobile)
- any other string, so you can apply your own styles more easily

---

<div class="post-metadata">

**Author:** ![zef](https://community.silverbullet.md/user_avatar/community.silverbullet.md/zef/32/7_2.png) [@zef](https://community.silverbullet.md/u/zef)\
**Post date:** [March 19, 2025, 4:46am UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/15 "2025-03-19T04:46:30Z")

</div>

This has now been merged, and is live on #Edge

---

<div class="post-metadata">

**Author:** ![i\_am\_dangry](https://community.silverbullet.md/user_avatar/community.silverbullet.md/i_am_dangry/32/357_2.png) [@i\_am\_dangry](https://community.silverbullet.md/u/i_am_dangry)\
**Post date:** [March 22, 2025, 9:06am UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/16 "2025-03-22T09:06:34Z")

</div>

Minor UI request. Is it possible to move the sync progress icon outside the menu? Currently if a large sync is in progress, you can’t see the status/progress unless you open the menu.

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 22, 2025, 12:55pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/17 "2025-03-22T12:55:12Z")

</div>

I’ll have a look to see if that’s easy to achieve.

Currently they’re all in the same container. I could move the progress icon up, but then it will look weird if you hover and see the three dots below it. 😅 So that’s barely a solution.

Alternatively, if it’s very important, you can use the setting `mobileMenuStyle: bottom-bar`. This keeps all icons visible at all times, but moves them to the bottom on smaller screens.

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 22, 2025, 1:13pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/18 "2025-03-22T13:13:30Z")

</div>

If others agree with the above sentiment, then we can indeed quite easily move the sync progress into it’s own little wrapper:

 ![image](https://community.silverbullet.md/uploads/default/original/2X/d/db46343bea4c57e18f2d5931a5090fd474d94342.png)

 ![image](https://community.silverbullet.md/uploads/default/original/2X/5/56092c8a5d7e840621b7b4afb7a912374cb0cad4.png)

Opened a PR here: [fix(menu): Move sync progress wrapper outside of actions menu by janssen-io · Pull Request #1309 · silverbulletmd/silverbullet · GitHub](https://github.com/silverbulletmd/silverbullet/pull/1309)

---

<div class="post-metadata">

**Author:** ![janssen-io](https://community.silverbullet.md/user_avatar/community.silverbullet.md/janssen-io/32/1155_2.png) [@janssen-io](https://community.silverbullet.md/u/janssen-io)\
**Post date:** [March 22, 2025, 8:43pm UTC](https://community.silverbullet.md/t/collapsible-vertical-action-menu-for-mobilescreens-but-not-only/1552/19 "2025-03-22T20:43:37Z")

</div>

@i_am_dangry it’s been merged 😊