When you start making modular prototypes in Atomic, one of the first interactive components you’re likely to need is one for handling navigation. 

This page contains a whole bunch of different navigation samples that you can copy and edit to get a running start with yours. The samples go from the most easy to the more advanced, so take that into consideration.

If you want to understand a bit more about why we've used these patterns, and explore some alternatives, read our article on creating navigation components.

Single level Navigation (made with simple hotspots)

In this sample the user can navigate through different pages using a navigation menu at the top, but this could easily be re-used in a bottom level navigation like you might find with most iOS apps.

Very basic.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Single level Navigation

The same basic sample as the previous example, however this one uses JavaScript instead of hotspots.

Slightly advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Slide-in Navigation

A classic example of mobile nav, the slide in menu is made using just 2 components, a couple lines of JavaScript and a bunch of smooth transitions. 

Slightly advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Slide-in Navigation (with hover states)

On the desktop side we created an example of a  slide-in menu which stays in place until the user clicks the hamburger menu again. Each menu item also has a hover state.

Slightly advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Toaster Navigation

Here we have a navigation using a pop up that automatically closes after the user interacts with it, just like the slide in navigation. They're very similar, actually.

Slightly advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Dropdown Navigation

Using Atomic's built in dropdown element we can create dropdown menus easily. This sample contains variables and a little JavaScript.

Slightly advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Double level Navigation – Mobile

Getting a little more advanced, we're doing a double level navigation where can click through three main sections which all contain three pages within them. The impressive thing about this sample is that there's only one main component, but a couple more lines of JavaScript. We strongly encourage exploring how this one works.

Advanced.

Interact with or copy & edit the sample
(simply click the copy & edit button in the bottom right)

Did this answer your question?