> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/pages/how-to-add-a-dropdown-menu-to-your-header-with-premier",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Add a dropdown menu to a header with Premier

> Learn to add a custom Dropdown Menu to your Page Header with the Premier template.

Lead your page visitors to landing pages, offers, and more with links in the streamlined format of a dropdown.

<Note>
  **Note:** This article refers to the Premier Legacy Templates. If you are using the Kajabi Pages Templates, please refer to the updated guide [here](/articles/website/pages/add-a-dropdown-menu-to-your-header).
</Note>

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/161hlu4hsq" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Note:** Adding a Dropdown Menu with Premier requires access to the Code Editor available with the Pro Plan. Learn more about our different plans at [kajabi.com/pricing](https://kajabi.com/pricing/).
</Note>

***

## Dropdown menu

Adding a Dropdown Menu to your Page Header is a great way to provide additional links using the beautiful, sleek design of a dropdown:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/tb21y3qenw" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Step 1. Add code

<Warning>
  **Important:** Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like [VirusTotal](https://www.virustotal.com/gui/home/url) or [Snyk](https://snyk.io/) to scan any custom code that you intend to use and apply certain [best practices](../../website/domains/code-based-customizations) to help reduce potential impact.
</Warning>

First, open the [Code Editor](how-to-access-the-code-editor#page-theme) for the Page you wish to customize.

* Click to open the **Sections** folder
* Then, click the **header.liquid** file
* Locate `{% if h-ShowMenu %}` near line 24
* Copy and paste `{% include "dropdown" %}` onto the line below `{% if h-ShowMenu %}`
* Click **Save** to keep your changes:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/iul8v9bxzh" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Step 2. Create dropdown file

* Next, open the **Snippets** folder
* Then, click **+ Add a new Snippet**
* Enter **dropdown** into the 'Name' field and click **Create File**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/2jarf4k8y9" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Step 3. Edit dropdown menu

In your new dropdown.liquid file, copy and paste the code below:

```html theme={null}
<ul class="nav navbar-nav" style="margin: 0; display: inline-block;">
<div class="dropdown">
<div class="dropdown-content">
</div>
</div>
<li class="dropdown" style="margin: 0;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ENTER NAME ON NAV BAR</a>
<ul class="dropdown-menu">
<li><a href="https://enterlinkhere.com/">OPTION 1</a></li>
<li><a href="https://enterlinkhere.com/">OPTION 2</a></li>
<li><a href="https://enterlinkhere.com/">OPTION 3</a></li>
</ul>
</li>
</ul>
```

* Replace **ENTER NAME ON NAV BAR** with the link name you wish to display to your site users
* Customize the sub-links and text in your Dropdown Menu by overwriting **[https://enterlinkhere.com/](https://enterlinkhere.com/)**, **OPTION 1, OPTION 2, OPTION 3** with your own URLs and text
* Click **Save** to keep and apply your changes
* Then, **Preview** your Page:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/8m4guuqk31" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Tip>
  **Tip:** Link to your other pages built in Kajabi by copying and pasting your page link. Learn to [copy your page link](/articles/website/pages/how-to-copy-your-page-link).
</Tip>

### Change the dropdown spacing (optional)

Looking to change the vertical spacing between your dropdown navigation links? This step requires additional coding in the Code Editor.

* In your Code Editor, open the **Assets** folder
* Select the **override.scss.liquid** file
* Copy and paste the code below:

```css theme={null}
li{
margin: 1px
}
```

* Change the margin value (1px) in the code to adjust the spacing to your preference
* Click **Save** to keep and apply your changes
* Then, **Preview** your Page:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/4z74jvjafh" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>