4: Create nav section

If you have noticed, every screen within Method has a “< Back” link. Our New Car screen should have one as well. We could add the Nav controls to secMain, but you should keep elements separate within their own sections.

Let’s build out our nav section for the New Car screen and show you our design best practices along the way!

However, if you are no longer on this screen, you can navigate to it by clicking on the vertical ellipsis of the app, and selecting the Manage link, and then customizing the New Car  screen.

Add a New Section

  1. First, you’ll need a new section to house your navigation objects.  Click the + icon to bring up the Insert Control menu and drag a new Section onto the canvas below the secMain  section.
  2. Click the arrow beside secMain caption to bring up a dropdown. Select "Section" and then "Move Down" to move the section below the new Section.
    Method best practices suggest having your navigation section at the top of the screen to make it easy to access.
  3. Select the new section and change the caption text to secNav (to identify it easily like you did with secMain). Turn off Show Header/Title Bar to keep your users from seeing the caption.
  4. Still editing secNav , under its Style, set the padding for top, bottom, left and right to 1x.

Add a New Text Object

Now it’s time to add a text object to be the Back button.

We’re calling this control the “back button” for simplicity’s sake, but remember it’s not actually a Button object - it’s a Text object.
  1. Click the + icon to return to Insert Control and drag a  text object  into the secNav.
  2. Select the text object and in its Settings, change its text to “Back”. This is going to be your back button!
  3. Check the Show Icon box and in the dropdown choose a left chevron “<”.
  4. Now let’s change the color scheme of your back button. Under Style, change the Text Color to “Navigation”.
  5. Click over to Preview Mode to take a look at your screen. It should look something like this:

Wow!  We have a navigation section. Next, let’s get to designing the second screen we’ll be using in this app.

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us