Get the Commonwealth Branding Bar

Implementing the Commonwealth Branding Bar

Follow these steps to add the new Commonwealth of Virginia Branding Bar to your official Virginia government website.

For technical problems, please contact developer@vita.virginia.gov.

Follow these steps to add the new Commonwealth of Virginia Branding Bar to your official Virginia government website. For technical problems, please contact developer@vita.virginia.gov.

Building Options

Output:

Agency or Virginia Governmental Entity An official website of the Commonwealth of Virginia Here's how you know An official website Here's how you know

Note: The above rendering of the Commonwealth of Virginia Branding Bar will update as options are selected below.

Step 1: Agency or Virginia Governmental Entity

Agency or Virginia Governmental Entity Name (required)*:

*This field allows the Commonwealth of Virginia Branding Bar to be customized to your agency or Virginia governmental entity. Please spell out the full official name.

Optional - Dynamic Name:

Choose a unique Class or ID of a page element that you would like a name to be pulled from for display within branding bar.

HTML Element Id (without #)

HTML Element Class (without .)

Optional - Set Static URL for Agency/Governmental Entity Anchor Tag Link:

Set a static URL for the anchor tag associated with the agency/governmental entity name within the Commonwealth Branding Bar. By default, the URL for the anchor tag is pulled from the website hostname.

Full-path URL (example: https://www.developer.virginia.gov)

Optional - Set a Skip Navigation Link:

Assign an anchor tag to link the to the HTML element that houses your main content based on the Id attribute. This is allows keyboard and screen reader users to access the main of your website/app much more easily.

For information on why skip navigation links are important for web accessibility please review this resource:
Learn more about Skip Navigation

Main Content HTML Element Id (without #)

Step 2: Choose Styling Options

Branding Bar background color:

Black
White

Optional - Alternative Placement Option:

Choose a unique ID of a page HTML element for the branding bar to be inserted within your layout. Please note that the branding bar should still be displayed strictly at the top of your website.

HTML Element Id (without #)

Step 3: Review and Generate Code Snippet

Review: Please review the above rendering of the customized bar to ensure details are correct.
Note: You must confirm the above details are correct within the rendering of the branding bar above before proceeding to the next steps.
Confirm: I have reviewed my personalized rendering of the branding bar above and I am confirming that all details within it are correct.
Agree to terms of use:
Note: You must agree to the terms of use before proceeding. View terms of use
Generate Code Snippet:Click the "Generate code snippet" button to generate a script tag.

Note on additional changes: Any additional changes after clicking the "Generate code snippet" button will require you to click the "Generate code snippet" button again to generate a new snippet with the updated information.

Step 4: Embed the Code Snippet into your Website

Click the "Copy to clipboard" button to copy the code snippet from Step 3 to insert within the head tag of your website.

Implementing the Commonwealth Branding Bar

Building Options

Step 1: Agency or Virginia Governmental Entity

Step 2: Choose Styling Options

Step 3: Review and Generate Code Snippet

Step 4: Embed the Code Snippet into your Website

Commonwealth of Virginia Branding Bar Terms of Use

Do not alter theCommonwealth of Virginia Branding Bar in any way.

Keep the banner up to date.