# Navigation (sidebar) menu display control

**URL:** https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687
**Category:** Theme component
**Tags:** deprecated, sidebar
**Created:** [September 4, 2023, 8:48am UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687 "2023-09-04T08:48:00Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 4, 2023, 8:48am UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/1 "2023-09-04T08:48:00Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Allows displaying sections and links for staff, logged-in and anon users |
| 🛠 | **Repository** | [https://github.com/Lillinator/navigation-menu-display-control](https://github.com/Lillinator/navigation-menu-display-control) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

## Description

The Navigation Menu Display Control theme component allows for the display of various default sections and links for staff-only and/or logged-in users only. You can also specify custom sections or custom links (placeholder names are included). Additionally, there is a setting for displaying a custom menu section for anonymous users only, as well as settings for setting the order of the default sections (category, tags, chat, channels, messages) . The sections and links in the settings are lists that can edited with existing sections (see screenshots below), as well as as many custom sections or links as you wish to add.

## Settings

👉🏻 For custom menu sections, they must be visible globally when you set them up (the `Make this section public and visible to everyone` checkbox must be enabled).

The top section is called “community” in the code, so if you want to hide that section, use the “community” section name. You can use the links installed with plugins, for example, docs, anniversaries and birthday links.

There are also settings that override each other - having a specific link in More visible to logged-in users will be overridden by the More drop down setting being visible only to staff.

| Setting Name | Description |
| --- | --- |
| `show these sections for staff only` | List of sections to show for staff only. Can include custom sections with “Staff Menu = staff-menu” slug style naming format. |
| `show these sections for logged-in only` | List of sections to show for logged-in users only. Can include custom sections with “User Menu = user-menu” slug style naming format. |
| `show these links for staff only` | List of links to show for staff only. Can include custom links named with the **same case format** (“Staff Link” = “Staff Link”). |
| `show these links for logged-in only` | List of links to show for logged-in users only. Can include custom links named with the **same case format** (“User Link” = “User Link”) |
| `show more for staff only` | Check-box to show the More drop-down section for Staff only. |
| `show more for logged-in only` | Check-box to show the More drop-down section for logged-in users only. |
| `show custom for anon only` | Text field for a custom menu section so show for anonymous users only (hides for logged-in users). |
| `show navigation menu to logged-in only` | Check-box to show the entire navigation sidebar menu to logged-in users only (hide from anonymous users). |
| `hide custom menus globe icon` | Hide the globe icon from staff for custom menu sections (not visible to non-staff by default). |
| `default menu section ordering` | Allows re-ordering of the default menu sections (does not apply to custom menus) |

* * *

## Screenshots

> **Settings for staff and logged-in only sections**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/4/c/4/4c44a290f329f94e2202cdb1720107f839e562b9.png)

> **Settings for staff and logged-in only links**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/6/6/f/66f70c388d903c9f859a859aab22ba460aa7c718.png)

> **Settings for more section, custom menu section for anonymous users only, globe icon, hiding entire navigation menu, and changing order of the default menu sections**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/2/7/7/27753439b0c25b4e8cef27ef7e20aa870a550139.png)

* * *

For custom group-specific navigation sidebar menu sections, please use the [Group Menu Sections](https://meta.discourse.org/t/group-navigation-menu-sections/273505) theme component.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 7, 2023, 2:29am UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/10 "2023-09-07T02:29:35Z")

</div>

Added a section to allow re-ordering of the default menu sections.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [April 29, 2024, 5:12pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/11 "2024-04-29T17:12:12Z")

</div>

I don’t think the hiding links thing is quite working correctly at the mo.

Sections hide just fine for me, but I can’t hide individual custom links when I convert them to lowercase and dashes.

But the official links seem to need lowercase. So they might be handled differently.

However - they work if the full title text is used (with spaces and capitals). So maybe only the OP (can it be wikified?) and the instructions in the TC need to be changed. Or maybe a core change is needed for consistency.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 3, 2024, 3:00pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/12 "2024-05-03T15:00:54Z")

</div>

thanks Nathan. yea something has changed there. will have a look at this over the weekend.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 4, 2024, 3:08pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/13 "2024-05-04T15:08:03Z")

</div>

Ok the component is still functioning properly, but the custom link class name format has changed so I had to make some changes to the field documentation in the component and the OP. Please update the theme component.

Unlike the custom menu sections, for the custom links, the names in the component settings should be the same case format as their actual custom names. Of course the default ones should still be lowercase just to make things even more confusing lol. 😁

For example, if I want to show a specific custom link called “GitHub Repo” for logged in users only:

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/e/b/8eb3ecba32b7b0947b9aea1d925a0eb3fc964efa.png)

I would enter the same link name in the `show these links for logged-in only` setting in the theme component:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/7/a/a7aa4dec7c09c00750f78a78bc4c0010506b0806.png)

So if you have custom links in the links display settings - `show these links for staff only` and `show these links for logged-in only` - you will need to change those component settings entries to match the link names.

Note that for custom menu sections (not links), the naming convention is still the same as it was before - it is still lower case slug style (ie: “Custom Menu Name” = `custom-menu-name`).

Thanks again for bringing this to my attention @nathank 🤗

At some point I want to add the ability rearrange _all_ the navigation sidebar menu sections, including custom ones, not just the default ones as it does currently. I know how to do it in hardcode, I just have to build it in to use settings and variables.

---

<div class="post-metadata">

### Author: ![bitmage](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bitmage/32/389881_2.png) [@bitmage](https://meta.discourse.org/u/bitmage)
#### Post date: [June 18, 2024, 5:35pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/14 "2024-06-18T17:35:35Z")

</div>

Hey Lilly,

I’m noticing:

- I can’t reorder sections regardless of whether I use the human name or the slug
- The whole sidebar gets hidden for guests even when I haven’t checked that box

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [June 18, 2024, 6:34pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/15 "2024-06-18T18:34:42Z")

</div>

> [@bitmage](#):
>
> - I can’t reorder sections regardless of whether I use the human name or the slug
> - The whole sidebar gets hidden for guests even when I haven’t checked that box

You can’t re-order custom sections with this component. I just checked the reorder functionality and it is working as expected.

~~Yea I can confirm the anon-hiding function is borked. I will fix it today. thanks for letting me know.~~

after looking ati it, the anon hiding function is working as expected, but you have to remove the default examples that I use in the settings for the `show these sections for logged-in only` to demonstrate how it works.

 ![Screenshot 2024-06-18 at 12.14.10 PM](https://global.discourse-cdn.com/meta/original/4X/5/c/d/5cdf1c38f6fd8446d6c00c83b1bab8c7e6a6b149.png)

> [@Lilly](#):
>
> `show these sections for logged-in only` List of sections to show for logged-in users only. Can include custom sections with “User Menu = user-menu” slug style naming format.

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [July 2, 2024, 4:46pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/16 "2024-07-02T16:46:07Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/2/2/2/2227266592fb07c5abf0ac57bb930b0e1ebf1639.jpeg)  
Not displadisplay anyone with not logged mode?

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [July 2, 2024, 6:04pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/17 "2024-07-02T18:04:26Z")

</div>

That should be a toggle setting…

![image](https://global.discourse-cdn.com/meta/original/4X/2/d/8/2d8cb04b300aafb1288182a485b448842a9671c9.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 2, 2024, 6:22pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/18 "2024-07-02T18:22:23Z")

</div>

see my post above yours 🙂

> [@Lilly](#):
>
> you have to remove the default examples that I use in the settings for the `show these sections for logged-in only` to demonstrate how it works.

edit: perhaps I should consider removing those and just use the screenshot to show. 🤔

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 18, 2024, 2:32am UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/19 "2024-07-18T02:32:02Z")

</div>

> [@Lilly](#):
>
> perhaps I should consider removing those and just use the screenshot to show

Ok I have done this now and edited the OP. Use the screenshots as a guide for default section and link names.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [July 29, 2024, 11:06pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/20 "2024-07-29T23:06:28Z")

</div>

I think that the CSS for the `⋮ More` section has changed (`btn-flat` is no more)

I’ve had to use this to hide it for anon:

```css
.anon button.sidebar-more-section-links-details-summary {
    display: none;
}

```

Here is a PR:  
[https://github.com/Lillinator/navigation-menu-display-control/pull/7](https://github.com/Lillinator/navigation-menu-display-control/pull/7)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [July 30, 2024, 1:21am UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/21 "2024-07-30T01:21:35Z")

</div>

This has been merged. thanks again Nathan 🤗

I also fixed the hide entire sidebar for anon function which was a bit broken.

---

<div class="post-metadata">

### Author: ![kOS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kos/32/441826_2.png) [@kOS](https://meta.discourse.org/u/kOS)
#### Post date: [October 26, 2024, 12:37pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/22 "2024-10-26T12:37:14Z")

</div>

Hi there,

Im stuck, while trying to comprehend how to use this nice component. Im trying to achieve that anon users only see “Become a member” or something similar.  
Can you please help me?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [October 29, 2024, 5:58pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/23 "2024-10-29T17:58:15Z")

</div>

I’ll give you 3 different ways to do this:

## 1. Use this theme component

Make a custom sidebar menu with the link to `/login` and use this setting in the theme component:

> [@Lilly](#):
>
> `show custom for anon only` Text field for a custom menu section so show for anonymous users only (hides for logged-in users).

 ![Screenshot 2024-10-29 at 10.56.21 AM](https://global.discourse-cdn.com/meta/original/4X/2/c/7/2c7ed209f2fdc82496e46ff1997fcb037831bbf7.png)

* * *

## 2. Use CSS in a new/exsiting theme or component

If you just want to add a link in the top section under My Posts, you can add the link to `/login` via the `More - Customized this section` link like this. For example if the link is called “Login or Signup”:

 ![Screenshot 2024-10-29 at 10.13.00 AM](https://global.discourse-cdn.com/meta/original/4X/a/6/f/a6f448e9c0eba02bb6524ca22b3f52c9029c7c1a.png)

 ![Screenshot 2024-10-29 at 10.14.36 AM](https://global.discourse-cdn.com/meta/original/4X/0/7/b/07bac3f1d7119a94c32eb07604b2ee1b091723fe.png)

Then go to a theme or theme component and edit the html / css like so:

 ![Screenshot 2024-10-29 at 10.17.03 AM](https://global.discourse-cdn.com/meta/original/4X/4/c/3/4c36284b4423706818a206e287eebd107ff4c590.png)

Keep in mind that the link references in that top section are case sensitive:

 ![Screenshot 2024-10-29 at 10.28.36 AM](https://global.discourse-cdn.com/meta/original/4X/c/6/e/c6e9b5fedf9ef37f5cd61f5d10fd3d941afc6618.png)

```scss
.sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: none;
}

.anon .sidebar-section-link-wrapper[data-list-item-name="Login or Signup"] {
  display: block;
}

```

result in incognito / anon view:

 ![Screenshot 2024-10-29 at 10.20.23 AM](https://global.discourse-cdn.com/meta/original/4X/6/f/4/6f44610cf24022fa223737c63e6ae5d8c064db50.png)

* * *

## 3. Use the following theme component

Yes I made a specific theme component ages ago that does this. It also does the reverse - displays a section for members only (logged in users).

> **[GitHub - Lillinator/anon-menu: Discourse anon-menu lets admins specify navigation...](https://github.com/Lillinator/anon-menu)**
>
> Discourse anon-menu lets admins specify navigation menu sections for admin or logged-in users

---

<div class="post-metadata">

### Author: ![kOS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kos/32/441826_2.png) [@kOS](https://meta.discourse.org/u/kOS)
#### Post date: [October 31, 2024, 12:39pm UTC](https://meta.discourse.org/t/navigation-sidebar-menu-display-control/277687/24 "2024-10-31T12:39:55Z")

</div>

got it. Thank you very much for the detailed guidance.
