Skip to main content

Create a Project with NAV and Breadcrumb

  1. Navigate to HSYCO Manager

  2. Click on "Project Editor"

  1. Click "New Project"

  1. Give the project a name ("breadcrumb" for example)

  1. Click "Create"

Tip: Now we will add the different pages and give them a hierarchy

  1. Click "Add Page"

7. Add a simple "Page (landscape)". This page will be a children of the "home" page

  1. Change the ID to "home-children-1"

  1. Change also the "Title" to "Home Children 1"

10. Now change the "Parent Page" field to "home". This means that this page ("home-children-1") is a children of "home" page

  1. Go to the "add" section

  1. Add a "Breadcrumbs" object

  1. Click "Align" to open the align menu

  1. Click "Center Vertically"

  1. Click "Center Horizontally"

  1. As you can see, the object is now centered in the middle of the page

  1. From the "edit" mode, you can also change the separator (slash or arrow)

Tip: Now we will add a page that is a children of the page we just created

  1. Click "Add Page"

  1. Click "Page (landscape)"

20. Change the ID to "home-children-1-2". This gives us a better overview on the fact that this page is a children of "home-children-1" page

  1. Change the title to "Home Children 1-2"

  1. Change the "Parent Page" to "home-children-1"

  1. Click "add"

  1. Add a "Breadcrumbs"

  1. Align horizontally and vertically like we did before

  2. Click "edit"

  1. The page should look like this

Tip: Now we will add the NAV to go through this pages

  1. Click "Add Page"

  1. Add a "Overlay (landscape)"

  1. Go to the "add" panel

  1. Add "Nav"

  1. Click "edit"

33. Change the mode to "drawer". In drawer mode, nav has closed/opened states, which can be controlled with a hamburger button, defined in the items attribute. When closed the nav is narrower and button appear without label, while when it's open it expands

  1. Change the width to 100 to give the nav a better appearance

  1. Untick "Push" so that the content of the page is not pushed aside when opening the nav

  1. Change the "Icon Size" to 40 so that icons are clearly visible

  1. Click "Not Set..."

  1. Click "Add"

  1. Click "Hamburger Button". This will be used to open the nav to show the labels of the buttons

  1. Click "Add"

  1. Add a "Link Button"

  1. Change the "Label" to "Home Children 1"

  1. Click here to change the icon

  1. Click the "Filter" field and search for "home"

  1. Select and icon and click "Ok"

  1. Change the "Link"

  1. Select "home-children-1"

  1. Click "Add"

  1. Add a "Divider". This will be used to show a line or, as the name suggests, a divider, between the buttons

  1. Click "Add"

  1. Add a "Link Button"

  1. Change the "Label" to "Home Children 1-2"

  1. Click here to change the icon of the button

  1. Click the "Filter" field and search for "home"

  1. Select an icon and confirm by clicking "Ok"

  1. Click this icon to change the "Link"

  1. Select "home-children-1-2"

  1. Click "Ok" to apply changes

  1. The nav should look like this

  1. Click "Save" to save the project