Global Footer
The <nys-globalfooter>
component is a reusable web component for use in New York State digital products. It helps provide users with essential information, secondary navigation, legal links, and contact details across all pages.
<nys-globalfooter agencyName="Office of Information Technology Services">
</nys-globalfooter>
Can’t use NYSDS web components in your project? Try using the CSS Variables instead.
Options
With Links
For public-facing sites, the Global Footer can include navigation links. To add links, follow this format:
-
Use an unordered list (
<ul>
) inside the<nys-globalfooter>
slot. -
Each list item (
<li>
) should contain an anchor (<a href="">
) linking to the desired URL.
Use the prop homepageLink
to link your agencyName
to your homepage.
Usage
When to use this component
- Use nys-globalfooter to provide consistent access to essential links like contact details, privacy policies, and terms of use across all pages.
- Ideal for displaying organizational information and secondary navigation
When to consider something else
- Don’t use the global footer for primary navigation or highly interactive features.
- Avoid adding content that is not relevant or essential for all pages.
Do
- Include essential links and information users need site-wide.
- Minimize the number of links.
Don't
- Don't use it for critical alerts or primary navigation.
Accessibility
The <nys-globalfooter>
component includes the following accessibility-focused features:
- Proper use of <footer> and <a> elements ensures compatibility with assistive technologies.
- Keyboard navigation: Users can tab through all links in the footer.
Properties
Property | Type |
---|---|
agencyName |
String |
homepageLink |
String (URL) |
CSS Variables
Events
Suggest a New Component
Do you have an idea for a new NYSDS web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.