# Menus

CivicTheme uses four different styles of menu in the base theme. These are placed by block in different regions of the page.

You can control the component / style for the menu with the theme hook suggestion which can be configured in the Block configuration form.

## Primary Navigation

The dropdown menu is the primary navigation for the site.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-c4dfd1d5e41b3f991a4577e2ef5acc7398a7dd72%2Fprimary-menu.png?alt=media" alt="Primary Menu Configuration."><figcaption><p>Primary Menu Setup. Click on the image to zoom in.</p></figcaption></figure></div>

For this menu to be themed correctly the menu block must be configured with `menu__civictheme_primary_navigation` theme hook suggestion in the HTML and style options of the Block configuration form.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-30dc5a60e33151b3c33dcdf11b09df01259c2adc%2Fprimary-navigation-menu-hook.png?alt=media" alt="HTML and style options - Theme hook suggestion: civictheme_primary_navigation"><figcaption><p>Primary Navigation Theme Suggestion Hook Configuration. HTML and style options - Theme hook suggestion: civictheme_primary_navigation. Click on the image to zoom in.</p></figcaption></figure></div>

Settings for primary navigation used in CivicTheme are:

```yaml
settings:
  id: 'menu_block:civictheme-primary-navigation'
  label: 'Primary Navigation'
  label_display: ''
  provider: menu_block
  follow: false
  follow_parent: child
  label_link: false
  label_type: block
  level: 1
  depth: 3
  expand_all_items: false
  parent: 'civictheme-primary-navigation:'
  suggestion: civictheme_primary_navigation
```

These are set through the Menu Block configuration form.

## Secondary Navigation

The secondary navigation is a menu block placed in the top right of the page.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-7ec1f71abe82c29359cc90a9ef83881bdc849312%2Fsecondary-menu.png?alt=media" alt="Secondary Menu Configuration."><figcaption><p>Primary Menu Setup. Click on the image to zoom in.</p></figcaption></figure></div>

For this menu to be themed correctly the menu block must be configured with `menu__civictheme_secondary_navigation` theme hook suggestion in the HTML and style options of the Block configuration form.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-6fcad4d6f94abcb1f9743e93c3ea5d04a9c3c6b8%2Fsecondary-navigation-menu-hook.png?alt=media" alt="HTML and style options - Theme hook suggestion: civictheme_secondary_navigation"><figcaption><p>Secondary Navigation Theme Suggestion Hook Configuration. HTML and style options - Theme hook suggestion: civictheme_secondary_navigation. Click on the image to zoom in.</p></figcaption></figure></div>

Default settings for secondary navigation provided by CivicTheme are:

```yaml
settings:
  id: 'menu_block:civictheme-secondary-navigation'
  label: 'Secondary Navigation'
  label_display: ''
  provider: menu_block
  follow: false
  follow_parent: child
  label_link: false
  label_type: block
  level: 1
  depth: 0
  expand_all_items: false
  parent: 'civictheme-secondary-navigation:'
  suggestion: civictheme_secondary_navigation
```

## Mobile Navigation

The mobile navigation is a content block type. This block once created is placed is in the Header Middle 3 region.

Configuration is managed within the content block system located in your site in /admin/content/block. There is a mobile navigation block and a search block. The search block has a checkbox for setting to mobile navigation block once this is set you will need to clear cache for search to appear in the mobile navigation.

Configuration for mobile navigation is shown below:

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-98113077398c0077e1f74ea5d4dd493e6608b95c%2Fmobile-menu-block-configuration.png?alt=media" alt="Mobile Navigation Block Configuration"><figcaption><p>Mobile Menu Block Configuration. Click on the image to zoom in.</p></figcaption></figure></div>

## Side Navigation

The side navigation is a menu block placed in the Side bar top left region of the page.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-3a1be78fe989d6e782f41a50b8322f261d1ede78%2Fside-navigation-menu.png?alt=media" alt="Sidebar Navigation Menu."><figcaption><p>SideBar Navigation. Click on the image to zoom in.</p></figcaption></figure></div>

For this menu to be themed correctly the menu block must be configured with `menu__civictheme_sidebar_navigation` theme hook suggestion in the HTML and style options of the Block configuration form.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-d6ddfe412d609a3dbf9701c0e97424b06998e27c%2Fsidebar-navigation-menu-hook.png?alt=media" alt="HTML and style options - Theme hook suggestion: civictheme_sidebar_navigation"><figcaption><p>Sidebar Navigation Theme Suggestion Hook Configuration. HTML and style options - Theme hook suggestion: civictheme_sidebar_navigation. Click on the image to zoom in.</p></figcaption></figure></div>

The settings for the side navigation used in CivicTheme are:

```yaml
settings:
  id: 'menu_block:civictheme-primary-navigation'
  label: 'Side Navigation'
  label_display: ''
  provider: menu_block
  follow: false
  follow_parent: child
  label_link: false
  label_type: block
  level: 1
  depth: 3
  expand_all_items: false
  parent: 'civictheme-primary-navigation:'
  suggestion: civictheme_sidebar_navigation
```

## Footer Navigation

The default setup for the footer navigation is a menu block placed in each of the four middle regions of the footer.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-cd39c3a363aa31abd595eaf8c6b56f2b29cc38ee%2Ffooter-menu.png?alt=media" alt="Footer Menu Configuration."><figcaption><p>Footer Menu Setup. Click on the image to zoom in.</p></figcaption></figure></div>

For this menu to be themed correctly the menu block must be configured with `menu__civictheme_footer` theme hook suggestion in the HTML and style options of the Block configuration form.

<div data-full-width="true"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-0f4e36a142026473031d50b27de2e3f5b5f5e784%2Ffooter-menu-theme-hook.png?alt=media" alt="HTML and style options - Theme hook suggestion: civictheme_footer"><figcaption><p>Footer Theme Suggestion Hook Configuration. HTML and style options - Theme hook suggestion: civictheme_footer. Click on the image to zoom in.</p></figcaption></figure></div>

The settings for each footer menu are:

```yaml
settings:
  id: 'menu_block:civictheme-footer'
  label: 'Footer menu 1'
  label_display: visible
  provider: menu_block
  follow: false
  follow_parent: child
  label_link: false
  label_type: fixed
  level: 1
  depth: 1
  expand_all_items: false
  parent: '<set the parent>'
  suggestion: civictheme_footer
```