Dev Diary Ep9 - Mobile Navigation

Hey Weavers,

I know there’s been a few requests about showing off Navigation in Elements, and I’m pleased to say that the day is finally here. @bon has been doing some great work on all our elements, and is now far enough along with the Mobile Navigation Element that I can show it off to you today!

As with all the Elements we’re building, it’s super flexible and is still a work-in-progress, so your feedback will help shape the final release. Watch the video below…

We love feedback!

Remember, we’re building Elements in the open so we can get feedback as we go. We want to make sure we’re building the product everybody here wants (including us). Share your ideas and feedback in the comments below.

I’ll be back next Tuesday as usual.

Dan & Team Realmac


Just outstanding! Brilliant! Magnificent!


I would like this to be a static vertical menu down the side. 2-column site on desktop and slide in off-canvass menu you demoed in mobile. If it can do this without duplicating the code in the html and hiding with CSS this would be a home run for me.


Wow a customisable menu built in, powerful with the same control as the rest of elements. Menu’s done right. can use the animation element in the menu’s. The menu with the icons, do submenus work in that area as well?

Very cool…lots of choices in designing. Do you plan on having a separate standard menu for desktop sites or would it be a menu that transforms on smaller breakpoints?

missed the button shadow animation, so is possible

will the menus have sticky / fixed options

1 Like

Hmm, that’s a tricky one. I’ll chat it through with @bon, but that one might be a no go for now :thinking:

Yes, you can use icons in the sub menu area as well!

1 Like

Yes, that’s in there!


Exactly. You can build a site and have different style menus at different breakpoints. i.e. a horizontal visible menu on desktop, and a hidden “hamburger” menu when you go down to mobile.

With the breakpoint feature we have built into Elements it makes this kinda stuff super easy, and super flexible :grin:


Excellent sticky and on scroll, a demo of the dropped in lower in the page and stick on scroll sometime??

1 Like

Great stuff Dan!

One thing that crossed my mind in the Realmac example you showed was the ability to add components/elements to the navigation panel in addition to the ones that appear to be built-in. I can see wanting to use different layouts/compositions within the elements of repeating list, for instance disclosure lists with sub-menus, or numbered/indented lists for chapters and structure, etc.

1 Like

Yes, we’re thinking of offering a separate “panel” element, so you could build your own menus. This would let you make anything you wanted!


Yes you can do this, I’ll add it to the list to demo next week!

UPDATE: Sorry, having looked at this again, the nav menu won’t have this built-in. We currently have two options working, Fixed, or Sticky. Will demo more on the mobile nav next week.

It’s things like this that open the door for third-parties to provide little solutions above and beyond what the built-in stuff offers.

UPDATE 2: Turns out we may have found a way to do this after all… stay tuned :wink:


Great stuff as usual Dan.

I hope there will be a way to collapse all the settings panels on the right - collapse all? Just open one or two?

Rather than dropping below the main menu item will sub menus be able to pop out to the left or right?


How many menu levels are supported?

That would great build your own was not expecting that on release

In RapidWeaver you can create as many as you like, but the Mobile Element will only output two levels.

We are planning on making it so you can build your own menu if you really need to have more levels than that… more on that later!

We’re trying to make Elements as flexible as possible, so you guys can build the websites you want!

1 Like