Experimenting with Navigation Options

Elements
1

I thought it would be fun to explore an alternative navigation system for one of my websites, that did not use a normal menubar.

Instead, it has a fixed button on the lefthand edge of the screen that uses a modal to display a menu comprised utilizing the Top Pages component. The button is fixed and does not scroll with the page, this took a bit of experimenting to get working properly.

Here is how it looks in action.

CleanShot 2025-06-15 at 09.40.24

The only thing I would have preferred to do differently but it is not possible with the current settings in Elements. If you look closely there is a red gradient behind the trigger button. The idea here was to be able to draw attention to the SideNav bar. But because Elements does not support RADIAL gradients this is not as effective as I would have liked. I wanted there to be a HALO around the button that was not overwhelming, but still made it possible to spot the trigger. I’m planning on experimenting more with the coloring of the button to see if that is effective at making it easier to spot, without requiring the additional background highlighting.

It still seems like a viable alternative navigation system that is less obtrusive and works at any screen size. Though not as obvious as a menubar.

Thoughts?

3 Likes
2

Radial gradients will be available when we upgrade to Tailwind v4 :slight_smile:

You could add a radial gradient, but that would mean venturing off in to some custom CSS classes, but it’s definitely doable!

Really cool! I like it :+1:

I love that you can build these types of things directly in Elements, without needing additional components :fire:

3

@ben As I was building this I was thinking about what it would have taken to do this in Classic/Stacks, and while it certainly could have been done I would have probably spent a few dollars on stacks doing it, and it would not have been nearly as much fun.

I did realize I could probably get a radial gradient, but was determined to work with what was provided. At some point in the future when we get them I’ll enhance it. For now, it works just fine.

Building out stuff like this in Elements also forces me to learn a lot more about how it works and how best to leverage what is provided.

2 Likes