--- title: Utility Navigation Bar tags: Navigation --- # Navigation: Utility Navigation Bar ###### **Control Code:** `N.UNB` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The design system's utility navigation provides content managed page links as well as a clear visual indicator that the visitor is on either a Patient or HCP website. This toggle will allow the user to visit the "sister" site by clicking. <!-- ### Usage Guidelines :::info *TODO: Novartis to write.* ::: General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component. ### Related Components :::info *TODO: Novartis to write.* ::: A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. - **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one. ### Accessibility :::info *TODO: Novartis to write.* ::: Specific accessibility considerations and recommendations for this component. --> ## Primary Configurations | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/Hyo-mQdS5.png) | | **Medium Breakpoint (Tablet)** | | -------- | | ![](https://hackmd.io/_uploads/SyEQX7uH9.png) | | **Extra Small Breakpoint (Mobile)** | | -------- | | ![](https://hackmd.io/_uploads/H1dXmmOSq.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Bar Background Color - **Required:** Must be included - **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette ### 2. Toggle Link This toggle link is designed to provide a visual distinction when switching between Patient-focused and HCP-focused versions of a brand site. While it may look like a toggle switch, it and the label text to its left and right are all one singular clickable link. - **Optional:** Can be excluded, component collapses to hide unused space - **Click Action:** Can link to a URL - **Toggle Position:** Default on right side, can be left side ### 2a. Toggle Link Left Text - **Required:** Must be included when the parent Toggle Link is included, otherwise should be excluded - **Default Text:** "Patients" - **Type Style:** Toplinks 2 - **Color:** NEUTRAL_05 (Off White), changeable within site color palette ### 2b. Toggle Link Right Text - **Required:** Must be included when the parent Toggle Link is included, otherwise should be excluded - **Default Text:** "HCPs" - **Type Style:** Toplinks 2 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 3. Callout Text - **Optional:** Can be excluded, component collapses to hide unused space - **Default Text:** "For U.S. Healthcare Professionals Only" - **Type Style:** Toplinks 2 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette ### 4. Logo This logo only appears at the Medium and Extra Small breakpoints. At the Extra Large and Large breakpoints, the logo instead appears in the [Primary Navigation](/yyFx6kjeTBuEP2XeDZ5bIg). See the [Primary Navigation](/yyFx6kjeTBuEP2XeDZ5bIg) documentation for additional information. - **Optional:** Can be excluded, component collapses to hide unused space - **Dimensions:** - Extra Large Breakpoint - n/a - Large Breakpoint - n/a - Medium Breakpoint - Width: 56px - 128px - Height: 18px - 34px - Extra Small Breakpoint - Width: 56px - 128px - Height: 18px - 34px The image for this component otherwise follows the standard requirements outlined in the [Images](/9XfBsCB3QPyxX5-9wfosjQ) page of this documentation. Please refer to that page for full details on its configurations and options. <!-- ### 5. CTA Button This CTA Button does not appear here at the Extra Small breakpoint. At the Extra Small breakpoint, the button instead appears in the [Primary Navigation](/yyFx6kjeTBuEP2XeDZ5bIg). See the [Primary Navigation](/yyFx6kjeTBuEP2XeDZ5bIg) documentation for additional information. The CTA Button for this component utilize the smaller-sized version of the buttons. This does not change any of the button's configuration options, only the physical size of the button itself. See the [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) page of this documentation for more information. - **Optional:** Can be excluded, component collapses to hide unused space The CTA Button for this component follows the standard requirements outlined in the [CTA Button](/H3_6iYFmQ_-AbCD8m_APXQ) page of this documentation. Please refer to that page for full details on its configurations and options. ### 6. Indication Link Active Label This label appears the above currently active Indication Link, if any are both included and active. - **Optional:** Can be excluded, but is automatically excluded if there are no indication links - **Default Text:** "Approved for" - **Type Style:** Indications Bar Approved - **Color:** Default Color Name, changeable within site color palette ### 7. Indication Link Active Decoration Line This decoration line appears the below the currently active Indication Link, if any are both included and active, and slides to be under any other Indication Links when the user hovers over them. - **Required:** Must be included if there are any indication links, but is automatically excluded if there are no indication links - **Color:** PRIMARY_01 (Brand Primary), changeable within site color palette --> ## Utility Links The right side of the utility bar has room for optional links which can lead to internal or external pages. Each configuration here is repeated for each of the utility links, up to a maximum of 6 links. **Number of Links:** 0-6 ### 5. Utility Link - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Toplinks 1 - **Color:** NEUTRAL_0 (Solid White), changeable within site color palette <!-- ## Indication Links The indications bar can hold links to specific indication sections in the site. Each link should link to a specific page inside the site dedicated to the indication. Each configuration here is repeated for each of the indication links, up to a maximum of 8 links. **Number of Links:** 0-8 ### 9. Indication Link - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** - Link is active: Indications Bar 1 - Link is inactive: Indications Bar 2 - **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette --> ## Additional Configurations ### Utility Links Expansion Default State If there are utility links included, and if the total content of the links does not fit into the available space in the utility bar, then a button appears that can expand and collapse the bar to reveal the additional links. When this option is available the bar by default starts on a collapsed state, however it can be set to start in an expanded state so all the links are visible to the user at page load. - **Utility Links Expansion State:** Default collapsed on page load, can be expanded on page load Below is an example of the utility bar when expanded with multiple links. | **Extra Large Breakpoint (Desktop)** | | -------- | | ![](https://hackmd.io/_uploads/B1x9Q7OS9.png) | | **Medium Breakpoint (Tablet)** | | -------- | | ![](https://hackmd.io/_uploads/Sy4qQX_r5.png) | | **Extra Small Breakpoint (Mobile)** | | -------- | | ![](https://hackmd.io/_uploads/Bkjqm7_S5.png) | ## Resources ### CMS Instructions #### Utility Navigation Configuration Page Administration A site administrator can configure the look and feel of components on the Primary Navigation Configuration page as follows: **Step 1** : Navigate to the **Structure** menu and click **Config pages**: ![Configuration Menu Item](https://hackmd.io/_uploads/Skfy6S3Qq.png) On the Config Pages screen, click the **Edit** button under Operations for the **Navigation Primary** library: ![Configuration Library](https://hackmd.io/_uploads/S1bPRTeD5.png) **Step 2:** Review the available settings within the Edit Navigation primary configuration page: ![Primary Navigation Config Page](https://hackmd.io/_uploads/r1HHPCxwc.png) Mandatory entries include: - **Show toggle link** - radio button. Choose whether the toggle link should be shown. Options are Hide or Show (default). - **Toggle link** - text. Choose how the toggle link should function. Options include internal path or external URL. - Attributes – **Target** - drop down window. Options include new window (default) or same window. - **Toggle link position** - Options include Right (default) or Left. - **Left side text** - set to “Patients”. Character limit 10. - **Right side text** - set to “HCPs”. Character limit 10. - **Background color** - set to PRIMARY_02. - **Toggle link text color** - set to Standard White 1. - **Text color disabled** - set to Standard White 2. - **Text color** - set to NEUTRAL_0. - **Collapsed** - radio button. If there are hidden links, choose whether the menu bar should start Expanded or Collapsed (default). Optional entries include: - **Text** - set to "For U.S. Healthcare Professionals Only". Character limit 50. **Step 3:** Change the fields values as you need to. **Step 4:** Be sure to click the save button to ensure that your changes are updated. ![Save Button](https://hackmd.io/_uploads/SJI5dH279.png) **Step 5:** Navigate to the Home page to view your update. ![Primary Navigatuon Update](https://hackmd.io/_uploads/rkkATy9mq.png) #### Utility Navigation Menu Items Administration Additionally, a site Administrator can manage the Primary Navigation menu items on the Menu items page as follows: **Step 1** : Navigate to the **Structure** menu and click **Menus**: ![Structure Menu](https://hackmd.io/_uploads/SkPeRr3Xc.png) :::info *TODO: menu screenshot may need update* ::: On the Menus screen, click the **Edit menu** button under Operations for the **Main navigation** item: ![Menus List](https://hackmd.io/_uploads/SkPQAyqQq.png) **Step 2:** Displayed are the list of 6 menu link items available on the Primary navigation component. ![Navigation Menu Configuration Page](https://hackmd.io/_uploads/SJvrA1575.png) **Step 3:** Click the **Edit** button under Operations on the the **Full Prescribing Information** menu link. ![Edit Menu Link Configuration](https://hackmd.io/_uploads/S1qvRJ9mq.png) Mandatory menu links configuration entries include: - **Menu link title** - the text to be used for this link in the menu – 50 characters. - **Link** - target location of menu link. Optional menu links configuration entries include: - Attributes – **Target** - drop down window. Options include new window (default) or same window. - **Enabled** - Flag denoting whether the link should be enabled in menus or hidden. - **Description** - Shown when hovering over the menu link - **Shown as Expanded** - display menu as expanded - **Parent link** - default as the parent link - **Weight** - links with high weight will sink and links with a low weight will be positioned nearer the top **Step 4:** Change the fields values as you need to. For example, alter the Attributes Target window from **Same window(_self)** to **New window(_blank)**. **Step 5:** Be sure to click the **Save** button to ensure that your changes are updated. ![Save Button](https://hackmd.io/_uploads/ryjMkI2X9.png) **Step 6:** Navigate to the Home page to test your change. ![Updated Primary Menu Items](https://hackmd.io/_uploads/HkY3C15mc.png) Click **Full Prescribing Information** menu link. *Cosentyxhcp.com* will launch in a new window.