Sometimes it makes sense to include the project home page along with your top-level pages in your navigation.

Navigation with Home and Top-Level Pages

However, because of the way page-based Navigation handles the hierarchical structure of the pages, and because all pages are sub-pages of the home page, you cannot accomplish this using a single component. The best solution is to use two navigation components placed side-by-side, one for the home page and one for the top-level pages.

Create the Home Page Navigation

Navigation Inspector with only Home Page

1. Drag the project home page from the page tree and drop it on the canvas.
• Dragging a page onto the canvas creates a horizontal navigation attached to that page.
2. In the Inspector, set Max Levels to “1”.
• This setting prevents the top-level pages from appearing as a drop-down menu from the home page.

Create the Top-Level Page Navigation

1. Drag a page-based navigation component from the palette onto the canvas.
• The page-based navigation is configured to show the top-level pages by default.

Style the Navigation Components

To complete the illusion, you will want to use the same styles for both navigation components, so that they appear as one component.

You may need to adjust the stroke and rounding styles, or overlap the components by a small amount to make them look like they are truly a single component.