In Alloy v3 we have a few different areas within our Editor backend on our site. Each area is focused on a different type of content. We have Blog Posts, Embeds and Droplets, each with their own list view within the Editor.
We can move from area to area using the Editor's Utility Menu in the bottom right corner of the page. It contains a link to each of these three important sections.
Today's quick tip is going to be focused on making a small menu bar at the top of our Editor page that will allow us to move from one area to the next without needing to even use the Utility Menu.
To do so we're going to use the Navigation Bar Pro stack that comes with Foundry v2. This will give us control of how the navigation bar is laid out, and since it is a maually curated navigation bar it allows us to set the links for the navigation items to whatever we'd like them to be.
Here's the Editor page, in RapidWeaver, to which we'll be adding our Navigation Bar Pro:
Let's place our Navigation Bar Pro stack just below our Banner there, but above our Editor stack, like so:
We dont' need everything that is on by default in the Navigation Bar Pro for this project. So let's disable the branding on the left side. We'll set it up so that our nav items are visible in the middle at the Desktop and Tablet breakpoints and hidden for the Mobile breakpoint, and turn off the toggle on the right-hand side.
If you wanted you could set the toggle for the drop down to be enabled at the Mobile breakpoint, but I know I'll be editing my posts either on my computer or iPad, so I should be good to go.
Now for the magic! Let's setup our navigation items to link to the sections we need them to. We'll set each each to have its own navigation item -- Blog Posts, Embeds and Droplets. Each of these navigation items has its own link in the Navigation Bar Pro stack:
We're going to set the links for these individual navigation items like so:
- Blog Posts link:
- Embeds link:
- Droplets link:
This means for instance our Blog Posts navigation item should look like this:
These links will let you navigation from one section to the next within the Editor. Now that we've got it all confiugred, let's publish our Editor page and give it a look live on the site.