How to add another navigation bar/block at the top of your site?

Question

I want to add a custom header/navigation block at the very top of my page like so, it's essentially a menu item. For example, it has two items: Home and Business. Once clicked it stays highlighted and menu items below it change.

The default is Home, and it has its own header and page underneath. If a user clicks 'Business', it will load another page with a different header/menu items.

I am wondering: How would I do this in drupal? Would I do it all in the navigation block? Would customization be required and where exactly? Any advice on how I can approach this best?

For example, These two menu items will be the top parents of every page.

Home
|
|___menu item/page 1
|   |
|   |__Another page, etc
|___menu item 2/page 2
|___menu item 3/page 3

Business
|
|___a different menu item/page 1
|___a different menu item/page 2
|___a different menu item/page 3

Answer 1

The layered navigation that you're asking about (where you always see primary menu items, but the secondary items are related to a particular primary item and they only show when their parent is active) is called Primary and Secondary menu in Drupal.

Drupal 7 Menu settings Primary and Secondary navigation

In Drupal 7 and older there was a Menu setting where you could choose which menu to use as Primary and Secondary level of navigation:

You could use separate Menus for Primary and Secondary levels, but it makes more sense to create one Menu with two or more levels (depths):

Then you would choose the same Menu under both Menu settings and Drupal would automatically only use the first level for Main links and lower levels for the Secondary links.

When you have that set up, and if you have the Main and Secondary links available and enabled in your theme:

you will see the Secondary items related to the parent item when you visit the parent page. Secondary items will appear in the place where the theme predicted it. In Bartik it's at the top right corner of the Header:

Check out this question: How can I make my menu children display horizontally below my main menu?

Drupal 8 Menu blocks configuration

Drupal 8 made changes to this system: Global menus (primary links, secondary links) have been converted into blocks.

This means that in Drupal 8 you still create a Menu with more than one level for your navigation, but the theme won't have a setting to display them or not (under Appearance). Instead, you will go straight to Blocks and place two of the same Main navigation blocks in regions of your choice. You can even include it twice in the same region which can be useful in your case where you want them one below the other.

Then configure each Menu block differently. The first one should always be visible and only show one level (image from D8 Docs: Menu Configuration):

The second one should only show when the parent from first level becomes active:

Although there are no theme settings anymore to turn on special areas that are styled specially as primary and secondary links, themes can still provide this through special regions. Bartik in Drupal 8 has regions called Primary menu and Secondary menu that look very similar to what they looked like in Drupal 7:

If you're creating your own custom theme you might want to create a special region for the two menus that would be displayed on top of the page.