---
title: "Station Header"
canonical: "https://docs.pbs.org/space/B3/4751514/Station%20Header"
format: markdown
---
> Macro (toc)
## Overview
Use the Station Header component to add the following elements to your Bento site:
1. **Menu** - Provide a similar look to the [PBS.org header](http://www.pbs.org/), allowing you to present users with a familiar website appearance and functionality on your station site
2. **Livestreaming** - Add the LIVE TV link to add PBS livestreaming to your station site
3. **Public Media Single Sign-On** - Integrate Single Sign-on, helping users access Passport content more easily
## Menu options
There are two menu styles from which to choose and both menu styles can be assigned at the menu item level. Your entire menu does not have to be one or the other.
The following are the two types of menus:
- [Dropdown](https://pbs-docs.atlassian.net/wiki/download/attachments/4751514/station-header-menu-dropdown.jpg?version=2&modificationDate=1711049695354&cacheVersion=1&api=v2) - allows linked text menu items
- [Mega Menu](https://pbs-docs.atlassian.net/wiki/download/attachments/4751514/station-header-menu-megamenu.jpg?version=1&modificationDate=1709829336910&cacheVersion=1&api=v2) - allows linked text and image menu items
## Requirements
- Your logo should be a maximum **width of 120 pixels and maximum height of 70 pixels**.
- You can add up to **eight** **(8)** menu items The character limit for all eight combined (including spaces) is **90** characters.
- You can add up to **ten** **(10)** sub-menu items.
## Example
| **Desktop/Tablet** | **Mobile** |
| --- | --- |
| 
**With CSS**
 | **Menu collapsed**
**Menu expanded**
 |
## How to implement the Station Header
- In the Header section of your Bento site, at the top of the page, click the **plus sign** (Figure 1).
> ⚠️ **Don't see Station Header component?** Make sure you are in the Header section of your page. The Station Header component does not display in any other sections of your page.
Figure 1
- In the *Header Components* section of the components menu, click** station header** (Figure 2).
Figure 2
### Add your station logo
- Hover your mouse over the **image icon** on the left side and click** Choose Asset** (Figure 1).
Figure 1
> 📝 **[Learn more about adding media to your component](https://docs.pbs.org/space/B3/1890058243/How+to+Add+Media+to+a+Component)**
- At the top of the window, click** Site Files **to search your filer folders for the image you want to use (Figure 2.1).
- If the image you want to use has not yet been added to your Filer Folders, click **Upload **to add the image (Figure 2.2). How to upload a Filer image
- Navigate your folders to access the image you want to use and click the **image **(Figure 2.3).
- Click **Add selected** (Figure 2.4).
**** Your image should have a maximum width of 120 pixels and a maximum height of 30 pixels. ***
Figure 2
- Your station logo displays on the left side of the header (Figure 3).
Figure 3
### Add menu
Your station has two menu options from which you can choose:
1. [Dropdown](https://pbs-docs.atlassian.net/wiki/download/attachments/4751514/station-header-menu-dropdown.jpg?version=2&modificationDate=1711049695354&cacheVersion=1&api=v2)
2. [Mega Menu](https://pbs-docs.atlassian.net/wiki/download/attachments/4751514/station-header-menu-megamenu.jpg?version=1&modificationDate=1709829336910&cacheVersion=1&api=v2)
- Select the type of menu you want to use by clicking the **component settings icon** (Figure 1.1).
- In the left side navigation, click the** type of menu** you wish to add (Figure 1).
Figure 1
## How to add the Dropdown menu
- Hover your mouse over the menu and click **Menu Item (1/8)** (Figure 1).
Figure 1
- Click **Menu Link** and type the **name of your first link** (Figure 2).
Figure 2
- After you've typed the label for your first link (Figure 6.1), click the** link icon** located above the label (Figure 3.2).
Figure 3
> 📝 **[Learn more about linking your component](https://docs.pbs.org/space/B3/4751716/How+to+Add+Links+to+a+Component)**
- Click **External Link** to add a URL that lives outside of your Bento site, **Page** to link to a page on your Bento site, or **Filer** to link to a file from your filer folders (Figure 4.1).
- You must type the entire URL when linking to an external site.
- In this example we selected External Link so type the **URL of the external link** (Figure 4.2).
- If you want the link to open in a new browser window, click the ***Open in a new window***** toggle** so that it displays ON (Figure 7.3).
- This is turned off by default.
- Click **Save** (Figure 4.4).
Figure 4
- Click the **Sub-Menu Item dropdown** to add sub-menu links related to the main link (Figure 5.1).
- Click **Menu Item** to add your next menu item (Figure 5.2).
Figure 5
- Click **Save **to save the page and click** Preview **to view your station header in a browser (Figure 6).
Figure 6
- Your station header displays (Figure 7).
Figure 7
## How to add the Mega Menu
- Once you've implemented the Station Header and added menu links, click the **menu link** under which you want to add a Mega Menu (Figure 1.1).
- In the left side navigation menu, click** Mega Menu** (Figure 1.2).
Figure 1
- The Mega Menu is placed in the lower section of the Station Header. Hover over the Mega Menu and click the** layout icon** (Figure 2.1).
- Click the **type of layout** you want to use for your Mega Menu (Figure 2.2).
Figure 2
- The sections display. In this example, we have chosen a 3 column layout. Hover over a section and click the** plus sign** (Figure 3.1).
- Click the** type of component** you want to add to the section of your Mega Menu (Figure 3.2).
Figure 3
- Add the rest of your menu items (Figure 4.1).
- When finished, click **anywhere outside of the menu** to exit the menu view (Figure 4.2).
Figure 4
- Click **Save **to save the page** **and click **Preview** to view your Mega Menu in a browser (Figure 5).
Figure 5
- Hover over the** link that holds the Mega Menu** (Figure 6.1).
- The Mega Menu appears (Figure 6.2).
Figure 6
## How to add a Donate button
The red text link on the right side of the navigation menu is reserved for calling out something important, such as a Donate button or anything else your station wants to hightlight.
- After you've added all of your menu items, click the **red Menu Link** to add a link you want to call out from the others, such as a **Donate** link (Figure 1).
Figure 1
- Link your menu item in the same fashion as all other menu items (Figure 2).
- Click anywhere **outside of the menu** to exit the menu.
Figure 2
## How to implement LIVE TV
LIVE TV is an optional feature that allows you to include a link to the PBS livestreaming feature.
[Learn more about LIVE TV](https://hub.pbs.org/local-livestreaming/local-livestreaming-in-pbs-video-app-and-web-players)
- Hover over your station header and click the** cog icon** to bring up the component settings (Figure 1).
Figure 1
- From the settings on the left side of the page, click the **LIVE TV Button** so that it displays ***ON ***to enable the LIVE TV feature (Figure 2.1).
- In the LIVE TV URL, type the** full URL **to your station's LIVE TV feed (Figure 2.2).
- The LIVE TV icon displays in the right side of your station header (Figure 2.3).
Figure 2
- Save the page.
## How to implement Public Media Single Sign-On (SSO)
Public Media Single Sign-On (SSO) is a customer identity management platform developed by PBS for public media entities that eliminates the need for users to create separate accounts when moving between NPR, PBS, participating NPR & PBS stations, and third-party content providers (e.g., PRX). For instance, a user can visit their local station website, the NPR One app, and the PBS Video app, all while using the same username and password. [Learn more about SSO](https://docs.pbs.org/space/PMSSO/29392997/Overview)
### Important notes about SSO and Bento
- The process of implementing SSO on your Bento site is performed on a rolling basis throughout 2024. Questions can be directed to [spi@pbs.org.](mailto:spi@pbs.org.)
- The SSO implementation is tied to your station's domain name. If the domain name changes, your SSO implementation will break. If you have plans to change your domain name, please first [submit a support ticket](https://digitalsupport.pbs.org/support/tickets/new).
### Before implementing SSO on your Bento site, you must do the following:
- Fill out and submit the Public Media SSO [interest form.](https://www.surveymonkey.com/r/publicmediasso)
- This form provides PBS with the necessary information to onboard your station and launch SSO on your website.
- Participate in an onboarding cohort set up by PBS.
- After filling out the interest form, PBS will contact you to schedule this.
> ⚠️ **[Learn more about onboarding](https://hub.pbs.org/spi/spi-initiatives/public-media-sso)**** Questions? Contact the PBS SPI team at ****[spi@pbs.org](mailto:spi@pbs.org)****.**
After completing the steps above and making sure you have completed the onboarding process, activate SSO on your station header.
- From the Station Header settings on the left side of the page, click the ***Sign In Link***** toggle** so that it displays **ON** (Figure 1.1).
- **Remember, this toggle does nothing until you have completed all of the steps listed above.**
- After clicking the toggle to ON, the Sign In link displays in the right side of the station header (Figure 1.2).
- The color of the Sign In link is not dependent on your [site color palette](https://docs.pbs.org/space/B3/4751454/How+to+Style+Your+Site) and is always blue.
Figure 1
- Save the page and preview your header. The Sign In link displays (Figure 2).
Figure 2
- When a user clicks the Sign In link on your site, they are moved through the login process. View the sign-in process [here](https://docs.pbs.org/space/B3/4751452/How+to+Create+a+PBS+Account#How-to-sign-in).
- Once logged in, the user can click their login in the upper right corner of the page and view their profile and logout of the site (Figure 3).
Figure 3
