Header component

This page contains information on how to create a Header component. For sites that need more flexibility than the standard Header provides, there is also the Open Header component option.

Create This Page Sample Page

The Component
Rendering

Creating the Component

Complete the following fields in the Header component:
1. Name: enter a name for your component here. (This field does not display anywhere on your website, but is used to organize files within Tridion.)
2. Schema: select Header
3. Site name: enter the name of your website. This will display in the top left of the header if you opt not to include a logo image.
4. Site logo (screen version): this is the logo that will appear in the header of your website. Click the browse folder icon , navigate to the image you'd like to use, and select it.
5. Site logo (print version): this is the logo that will appear on printed copies of your website. Click the browse folder icon , navigate to the image you'd like to use, and select it.
6. Links that appear in header: these links appear just above the search box on the right side of the header. We recommend keeping it to 3 links or less.
  1. Text to display in the link: this will be the name of the link that appears on the screen. Use one of these two fields to set where the link should direct:
    1. InternalLink: if you wish to link to a page within your website, click the browse folder icon , navigate to a component included in the published page, and select it.
    2. ExternalLink: if you wish to link to another website, paste the link to the page in this field.
7. Toggle box display name: (optional) if desired, you can include a toggle box on the navigation bar, just under the search box. Enter the name of the toggle box in this field.
8. Toggle box content: enter the content for your toggle box here. This is a rich-text field that accepts text formatting, images, lists, and more.
9. Relative URL to your site's root directory: unless this header is for a sub-site, you can leave this field blank. For sub-sites, please enter the path as described ("/site/subsite/"). For example: /deed/ssb/
10. Header alert banner: if your site has a Header Alert Banner, link to it here. Click the browser folder icon , navigate to the Header Alert Banner component, and select it.
When you've completed all the fields, Save and Close the component.
Rendering

The Header component is not inserted into a page, so it doesn't have a component template. However, it is published directly and applies to every page on the website. Below is a sampling of how it renders.
- The Site logo (screen version) (#4) appears on the left side of the header. If no image was added to the header, then the Site name (#3) would appear in this spot.
- The links that appear in the header (#6) appear above the search box.
- The toggle box display name (#7) appears above the navigation bar, under the search box. When clicked on, the toggle box content (#8) will appear in a drop down.