# Dev Diary Ep9 - Mobile Navigation

**URL:** <https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786>\
**Category:** Elements\
**Tags:** elements, devdiary\
**Created:** [March 12, 2024, 4:31pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786 "2024-03-12T16:31:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 12, 2024, 4:31pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/1 "2024-03-12T16:31:43Z")

</div>

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. @ben 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…

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/2/f23ee345a712df0761c31921745beb0e8afe2588.jpeg "Dev Diary Ep9 - Mobile Navigation") ](https://www.youtube.com/watch?v=2E4KpFLm0a4)

## 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.

Thanks,  
Dan & Team Realmac

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [March 12, 2024, 4:37pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/2 "2024-03-12T16:37:10Z")

</div>

Just outstanding! Brilliant! Magnificent!

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [March 12, 2024, 4:45pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/3 "2024-03-12T16:45:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 12, 2024, 5:21pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/4 "2024-03-12T17:21:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gfcreative](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/gfcreative/32/22974_2.png) [@gfcreative](https://forums.realmacsoftware.com/u/gfcreative)\
**Post date:** [March 12, 2024, 5:40pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/5 "2024-03-12T17:40:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 12, 2024, 7:07pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/6 "2024-03-12T19:07:11Z")

</div>

missed the button shadow animation, so is possible

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 12, 2024, 7:13pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/7 "2024-03-12T19:13:24Z")

</div>

will the menus have sticky / fixed options

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 8:48am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/8 "2024-03-13T08:48:42Z")

</div>

> [@Flash](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 8:49am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/9 "2024-03-13T08:49:56Z")

</div>

> [@upssjw](#):
>
> 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?

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 8:50am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/10 "2024-03-13T08:50:44Z")

</div>

> [@upssjw](#):
>
> will the menus have sticky / fixed options

Yes, that’s in there!

 ![CleanShot 2024-03-13 at 8 .50.24@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/a/6ae42e90a31cfca338a814da7b2c404423239f79.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 8:53am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/11 "2024-03-13T08:53:19Z")

</div>

> [@gfcreative](#):
>
> Do you plan on having a separate standard menu for desktop sites or would it be a menu that transforms on smaller breakpoints?

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 😁

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 13, 2024, 10:50am UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/12 "2024-03-13T10:50:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [March 13, 2024, 2:33pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/13 "2024-03-13T14:33:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 2:52pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/14 "2024-03-13T14:52:57Z")

</div>

> [@anon68150607](#):
>
> 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.

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!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 2:53pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/15 "2024-03-13T14:53:28Z")

</div>

> [@upssjw](#):
>
> Excellent sticky and on scroll, a demo of the dropped in lower in the page and stick on scroll sometime??

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 😉

---

<div class="post-metadata">

**Author:** ![LEZ](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/lez/32/35617_2.png) [@LEZ](https://forums.realmacsoftware.com/u/LEZ)\
**Post date:** [March 13, 2024, 3:48pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/16 "2024-03-13T15:48:16Z")

</div>

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?

L E Z

---

<div class="post-metadata">

**Author:** ![thominator](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/thominator/32/35233_2.png) [@thominator](https://forums.realmacsoftware.com/u/thominator)\
**Post date:** [March 13, 2024, 6:14pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/17 "2024-03-13T18:14:41Z")

</div>

How many menu levels are supported?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 13, 2024, 7:53pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/18 "2024-03-13T19:53:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 9:14pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/19 "2024-03-13T21:14:10Z")

</div>

> [@thominator](#):
>
> How many menu levels are supported?

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!

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 13, 2024, 9:14pm UTC](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786/20 "2024-03-13T21:14:44Z")

</div>

> [@upssjw](#):
>
> That would great build your own was not expecting that on release

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

[Next page](https://forums.realmacsoftware.com/t/dev-diary-ep9-mobile-navigation/42786.md?page=2)
