Docs

Everything You Need to Know

Tutorials

Navigation List

Setup

The most common way to organize an app to enable the users to get to different areas is to use a navigation list. By tapping a list item, the user is directed to another screen. Each list item could lead to a complete different screen. Or they could all lead to the same screen, where the app loads different content based on which item the user tapped.

ChocolateChip-UI provides navigation lists to make creating these types of navigation as simple as possible. You use a typical ChocolateChip-UI list, but on the list items you put a data-goto attribute with the screen you want that list item to navigate to:

<ul class="list">
  <li data-goto="recipes">
    <h3>Recipes</h3>
  </li>
  <li data-goto="shopping-list">
    <h3>Shopping List</h3>
  </li>
  <li data-goto="wish-list">
    <h3>Wish List</h3>
  </li>
</ul>

The above list presupposes that there are screens in the app with the IDs: "recipes", "shopping-list" and "wisth-list". As long as these exist, tapping on the list item will automatically take the user to the designated screen, complete with animation. To get back to where you came from, back navigation, all you have to do is put a back navigation button in the navbar:

<nav>
  <button class="back">Back</button>
  <h1>The Title</h1>
</nav>

The above back button will automatically return the user to the previous screen. This is all there is to put together a navigation list - a list with data-goto values and some destination screens with back buttons.

Routing

Although the above list is a perfect candidate for navigation lists, sometimes you may have a list where each item leads to a detail page that shows the same layout with the details for the items tapped. You can use routing to handle this situation. You have the navigation list items all point to the same screen, but append each destination with a unique id:

<ul class="list">
  <li data-goto="detail:apples">
    <h3>Apples</h3>
  </li>
  <li data-goto="detail:oranges">
    <h3>Oranges</h3>
  </li>
  <li data-goto="detail:bananas">
    <h3>Bananas</h3>
  </li>
  </li>
  <li data-goto="detail:pears">
    <h3>Pears</h3>
  </li>
  </li>
  <li data-goto="detail:cherries">
    <h3>Cherries</h3>
  </li>
</ul>

Then you can handle these ids using a route. Please read this tutorial about routing for more information.