My Navigation Wishlist

  • 6
  • Idea
  • Updated 2 years ago
  • Under Consideration
  • (Edited)
I'd like to move to using Skuid's navigation component, but there's a handful of wishlist items I'd love to see first:
  1. Allow an item source of Model. We have configurable menu items stored as data, so this would allow us to reuse them.
  2. Collapse horizontal navigation down to a hamburger menu on smaller screen sizes (as per Craig's post).
  3. Allow a drop down menu to simply have an icon as a label.
  4. Allow icons in navigation items to be larger. Doing it with custom CSS is pretty fiddly.
  5. Bonus: some sort of highlighted state to show that a navigation item is "active". This may be a little tricky given that selecting an item can fire many actions. Perhaps there's an action to highlight a navigation item as active?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb

Posted 3 years ago

  • 6
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
I like 1 and 2 a lot. Number 3 can be done now just by choosing an icon and leaving the label blank. I do this in some of my headers now. Re: #4, Can't you control active state of navigation items in the theme editor?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Re 3, I mean just having an icon as label for a menu, as opposed to an item within the menu. Is there a way to do that now?
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Ah... So, horizontal navigation items can have sub items underneath them. So I do a horizontal navigation with a single navigation item with several sub navigation items so it works like a drop down. Then you can set the single navigation item to have an icon with a blank label
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Interesting idea, but what's displaying at the very top level? Just the downward-pointing carat?
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Well it isn't a drop down, so it doesn't have the carat. It just displays the icon which in my case is a plus sign with a white circle background. Click the icon and the dropdown appears. In another use, I created an "icon dropdown" by using a nested responsive grid with two panels. The left panel is the icon and the right panel is the dropdown with the carat. You have to play with it a bit, but you can get it to render as if it is a single element.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glenn.  These are all interesting ideas, and most of them have been previously identified.  I'd consider most of these to be on our backlog today.  

Thanks for your good thinking.   Keep at it! 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Could use item 5 right now as it's not 100% clear where the user currently is once they've selected a Tab or Detail page. Of course I could include a Page Title to show but the nav bar option helps.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
I'm working on #5 right now. My navigation menu pretty much corresponds to modules that each of my pages are in, so I'm thinking that if I can get at the module name of the current page, I could conditionally highlight a module page with some javascript application of css styles. Will update here if I can get it working. 

In the mean time, #2 has been implemented in Brooklyn! So cool. You can see it in action here: https://www.fullskope.com/

#4 you can (sort of) use font awesome short cuts. So if your icon is fa-bars then in the icon text box in the page builder add fa-lg or fa-2x or fa-3x and it will get bigger. However, this does not look good if you have text in the navigation item as well, without CSS trickery as you say. 
Photo of Josef Lagorio

Josef Lagorio

  • 262 Points 250 badge 2x thumb
Hey Jack - I tried following your comment here to install font-awesome, but it doesn't seem to be overriding the standard silk icons. When I try to add a FA icon, the silk icon displays instead.

Any idea on this?