Skip to main content

Agency Header

The Agency Header appears near the top of the page directly beneath the Global Header. 

How it Works

The Agency Header serves the purpose of anchoring the person on the page and clearly letting them know which agency site within OK.gov they are on. In addition to the logo, there is search functionality and navigation so that the user can navigate and find his/her way around the agency site.

How to Use

The Agency Header Configure panels are divided into two parts. The first part is called ok.gov/Agency Header. The second part is called the Agency Top Navigation panel. Each of these configuration panels can be accessed by hovering over the header area of the page.

Configuring the Logo tab of the Agency Header

  • The Logo tab of the Agency Header configuration panel has a place to add an image of a logo to your header. The types of image assets which can be implemented as your logo can be .SVG, .JPG or .PNG. It is recommended to use an .SVG asset. SVG stands for Scalable Vector Graphic. The file size of an SVG is low, and the image quality is sharp at any scale. 
  • The second element in the Logo tab is the URL input. 
  • Alt text can be added
  • The check box for Global Header should be left unchecked.

Configuring the Agency Top Navigation of the Agency Header

  • Agency page navigation can be added to the Agency Header component using the Configure tool. There is a dialog box for adding the page label and link. 
  • As many navigation items and links can be added as desired. 
  • If more page labels are added than there is room for on one line, More dropdown tabs will be appear which will house the additional navigation items. The More dropdown will appear on the right side of the page.

Desktop Example

Mobile Example

Last Modified on Nov 10, 2020
Back to Top