-
Notifications
You must be signed in to change notification settings - Fork 3
Navigation
This is the custom navigation component for the Libraries. It removes the additional sidebar button on the left side of the logo to avoid user confusion caused by redundant navigation. The sidebar-style menu appears only on small screens (width < 1240px). This header navigation supports only two levels of menus to simplify the user experience and prevent complicated navigation. While the main navigation links serve as regular links, the utility navigation links can also be used as shortcuts to utility features.
The navigation component consists of three slots: "Main Navigation", "Utility Navigation", and "Search". The main navigation slot is for primary navigation links, the utility navigation slot is for sub-navigation links and additional information, and the search slot is for search functionality.
Visually, the main and utility navigation are displayed as a two-row horizontal navigation bar. The main navigation links appear on the bottom row, while the utility navigation links are on the top row. The search and utility navigation share the same row, with the search positioned to the right of the utility navigation.
| Field | Data Type | Requirement | Description | Note |
|---|---|---|---|---|
| Alternative Logo URL | String | Optional | An alternate URL to an SVG file to use as the logo instead of the default UMD Libraries logo. | Must be an SVG with dimensions of 300×90 (or a matching ratio). Leave empty to use the default logo. |
| Field | Data Type | Requirement | Description |
|---|---|---|---|
| Main Navigation | Block | Required | The primary navigation for the website. Should include only internal links; functional elements should not be placed here. |
| Utility Navigation | Block | Optional | Sub-navigation for supplemental links and utility content. Supports two dropdown types: a regular two-level link dropdown and a utility block content dropdown. |
| Search | WYSIWYG | Optional | If a search option is needed, insert the raw HTML code for the search feature using the WYSIWYG editor. |
Create the intended menu structure and functionality using Drupal's built-in functions. There can be two different menus: one for the main navigation and an optional one for the utility navigation.
Menus can be placed under the Main Navigation or Utility Navigation slots in the navigation component.
The initial visibility level should be 1, and the number of levels to display can be set to 2 (to allow dropdowns for each top-level menu item).
This is the custom utility component for the Libraries. It displays utility features such as location hours and system status. It can only be placed under the Utility Navigation slot in the navigation component.
1240px: This is the breakpoint at which the sidebar-style menu appears on small screens. This custom breakpoint is designed for the main Libraries website to address responsive design needs.
The logo height is limited to 64px, with no restriction on width. The logo should maintain its original aspect ratio.
To replace the logo site-wide, replace the logo.svg and logo-dark.svg files in the theme's assets folder. The logo should be a vector image (SVG) for optimal scalability and performance.
Alternatively, use the Alternative Logo URL prop to provide a different logo for a specific instance of the Navigation component without replacing the theme files.