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:
- Allow an item source of Model. We have configurable menu items stored as data, so this would allow us to reuse them.
- Collapse horizontal navigation down to a hamburger menu on smaller screen sizes (as per Craig’s post).
- Allow a drop down menu to simply have an icon as a label.
- Allow icons in navigation items to be larger. Doing it with custom CSS is pretty fiddly.
- 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?
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?
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?
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
Interesting idea, but what’s displaying at the very top level? Just the downward-pointing carat?
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.
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!
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.
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.
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?
