Navigation Headings?

[kushfest]

Is there a clean way to have a headings in the navigation module?

My navigation menu needs some organization and I'm hoping to add some headers. I was able to get it setup, but the headers don't have targets, so they give an error when clicked. Here's an example of what i've got, with CONTRACTS intended as a header:

[meatballs]

Hi @kushfest

Yes, you can include an on_click entry for those menu items with any callable as its value.

[kushfest]

awesome! thanks @meatballs! that worked to get rid of the error. would it require complicated css work to get the heading to not change background color on mouse over?

[meatballs]

There isn't any way to distinguish between different types of link in the menu at present. You could add a role and some css to do that but it would affect the whole menu.

[meatballs]

There isn't any way to distinguish between different types of link in the menu at present.

Actually, that's not true! You can pass any link property in your menu item, so you could add a role to each of your header items and then set the css for for that role in your theme.css to anything you want.

[kushfest]

This sounds great! My first attempt wasn't successful, but that's likely more related to my lack of CSS knowledge. I'll keep tinkering. Thank you!

[meatballs]

I've just had to do exactly this myself. I created a role called 'menu-header', restricted it to Links only and then added the following css:

.anvil-role-menu-header {
  cursor: default;
  pointer-events: none;
}

.anvil-role-menu-header .link-text {
  color: %color:Gray 600%;
}

[kushfest]

This is great! Thank you so much for sharing. I haven't been able to get it working though, and I wonder if I'm missing something obvious.

I'm building my menu based on the permission of the user who is logged in, so i use append to add relevant items to my menu. Here's an example of adding a heading with the new menu-header role:

menu.append({'text':'CONTRACTS', 'on_click':self.do_nothing, 'role':'menu-header'})

The code doesn't generate any errors, but the background of that header link is still changing on mouse-over. To be sure, I added a role called menu-header and restricted it to Links (it also didn't work when I allow it for all components). I also added your CSS code above to my theme.css file. Any suggestions on what I'm missing?

[meatballs]

Ah yes. In the app I'm creating, I use a custom on_click method and that is covering up a bug that exists in the default on_click. I'll put together a change to fix that...