Navigation Components

Overview

This documentation provides a comprehensive overview of the Navigation components.

Table of Contents

1. Component Overview
2. API & Props
3. Styling & Behavior
4. Dynamic Linking
5. DatoCMS Configuration

1. Component Overview

There are primarily four main components:

• HorizontalNavigation.tsx - A horizontal navigation bar suitable for larger screens.
• HorizontalNavigationLink.tsx - A single navigation link that can appear in the horizontal navigation.
• SidebarNavigation.tsx - The sidebar navigation typically used for smaller screen sizes.
• SidebarNavigationLink.tsx - A single navigation link that appears within the sidebar.

These components are designed to fetch link data directly from DatoCMS, structure them, and render them either horizontally or within a sidebar depending on the screen size.

2. API & Props

The following are the key props for the main components:

HorizontalNavigation

• links: The primary navigation links.
• socialMediaLinks: Special links typically used for social media icons.

HorizontalNavigationLink / SidebarNavigationLink

• link: The navigation link data which can either be a top-level link (LinksFragment) or a child link (LinkFragment).

3. Styling & Behavior

Styling for the navigation components is defined in navigation.module.scss. Below are the main classes:

• .horizontal-navigation: Styles for the horizontal navigation bar. This becomes hidden for screen sizes less than $screen-md.
• .sidebar-navigation: Styles specific to the sidebar. It’s only visible for screens smaller than $screen-md.
• .nav-link: Styles for the links within the horizontal navigation.
• .child-links: Styles for dropdown child links.

4. Dynamic Linking

The DynamicLink component is utilized to render dynamic links based on the provided data. It decides whether to render an external URL or an internal link based on the DatoCMS data structure.

• For external links, it uses the native <a> tag.
• For internal links, the Next.js Link component is used.

DynamicLink also provides visual feedback if there’s no valid link.

5. DatoCMS Configuration

Based on the GraphQL fragments provided (Link and Links), the following configurations are available:

Link

• id: Unique identifier.
• externalUrl: URL for external links.
• internalLink: Link to internal pages (can be general pages or the home page).
• title: The link text to display.
• icon: Optional icon for the link.
• hideTitle: Flag to determine if the title should be hidden. For example social media icons typically don’t have a title.

Links (Top-level Link)

• childLinks: An array of child links associated with the top-level link.

Note: It’s important to ensure that either an externalUrl or an internalLink is provided for each link in DatoCMS. If not, a visual warning will be rendered.

Remember: The primary source of truth for these configurations lies within DatoCMS. Ensure that the necessary fields are populated correctly to have the desired output on the website.