--- title: Primary Navigation tags: Navigation --- # Navigation: Primary Navigation ###### **Control Code:** `N.PN` <!-- ![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image) --> ## About This Component The primary navigation is a vertical, left-aligned element that allows for two levels of navigation. It is an icon-driven, mobile first approach that features a thumb navigation for more ergonomic usage on handheld devices. The navigation collapses during browsing on desktop to allow for additional screenspace for content viewing. <!--- ### 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), Expanded With Flyout** | | -------- | | ![](https://hackmd.io/_uploads/HksAvM_Hq.png) | | **Extra Large Breakpoint (Desktop), Collapsed** | | -------- | | ![](https://hackmd.io/_uploads/rJJJ_MdBq.png) | | **Medium Breakpoint (Tablet), With Flyout** | | -------- | | ![](https://hackmd.io/_uploads/B1I1_G_r9.png) | |**Extra Small Breakpoint (Mobile), With Flyout** | | -------- | | ![](https://hackmd.io/_uploads/H1CJ_GuBq.png) | | **Key** | | ------- | | ![](https://hackmd.io/_uploads/S1-x39hQc.png) | ### 1. Expanded Logo This logo only appears at the Extra Large and Large breakpoints. At the Medium and Extra Small breakpoints, the logo instead appears in the [Utility Navigation Bar](/r8GSKKFxQuucMIQQMc_fSA). See the [Utility Navigation Bar](/r8GSKKFxQuucMIQQMc_fSA) documentation for additional information. This is the larger version of the logo when the navigation is in the expanded state. - **Required:** Must be included - **Dimensions:** - Extra Large Breakpoint - Width: 80px - 177px - Height: 30px - 60px - Large Breakpoint - Width: 60px - 137px - Height: 30px - 60px - Medium Breakpoint - n/a - Extra Small Breakpoint - n/a 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. ### 2. Collapsed Logo This logo only appears at the Extra Large and Large breakpoints. At the Medium and Extra Small breakpoints, the logo instead appears in the [Utility Navigation Bar](/r8GSKKFxQuucMIQQMc_fSA). See the [Utility Navigation Bar](/r8GSKKFxQuucMIQQMc_fSA) documentation for additional information. This is the smaller version of the logo when the navigation is in the collapsed state. - **Required:** Must be included - **Dimensions:** - Extra Large Breakpoint - Width: 30px - 40px - Height: 30px - 60px - Large Breakpoint - Width: 30px - 40px - Height: 30px - 60px - Medium Breakpoint - n/a - Extra Small Breakpoint - n/a 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. ### 3. FUSE Code - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Disclaimers and Notes - **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette Note that this FUSE code is functionally unique from the standard FUSE code that appears elsewhere in the system. Configuration options on the [FUSE Code](/cU84_lreQY2OTQupfjeaTg) page do not apply to this FUSE code in the navigation. ## Navigation Links These top-level navigation links act as the primary means of navigating the site. Each link can either be a standalone link that takes the user to a page in the site, or it can have a flyout of subnavigation links detailed further down. Each configuration here is repeated for each of the navigation links to be included, up to a maximum of 8 links. - **Number of Links**: 1-8 ### 4. Navigation Link Label - **Required:** Must be included for each navigation link - **Type Style:** Nav 1 - **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette - **Click Action:** Links to an internal page on the site ### 5. Navigation Link Icon The icon has a fixed size at the Extra Large and Large breakpoints. At the Medium and Extra Small breakpoints, when the navigation moves to be at the bottom of the screen, the icon can optionally increase in size to be more visible on smaller devices. - **Required:** Must be included for each navigation link - **Dimensions:** - Extra Large Breakpoint - Width: 20px - Height: 20px - Large Breakpoint - Width: 20px - Height: 20px - Medium Breakpoint - Width: 20px - 32px - Height: 20px - 26px - Extra Small Breakpoint - Width: 20px - 32px - Height: 20px - 22px The icon 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. ## Subnavigation Flyouts Each top-level navigation link can optionally include a flyout with additional information and subnavigation links. This flyout should only be included for a top-level Navigation Link if there is at least one subnavigation link included in the flyout. Each configuration here is repeated for each of the flyouts to be included. - **Optional:** Can be excluded ### 6. Flyout Icon The icon has a fixed larger size at the Extra Large and Large breakpoints. At the Medium and Extra Small breakpoints, when the navigation moves to be at the bottom of the screen, the icon has the same size as the top-level navigation link's icon. - **Required:** Must be included for each navigation link - **Dimensions:** - Extra Large Breakpoint - Width: 48px - Height: 48px - Large Breakpoint - Width: 48px - Height: 48px - Medium Breakpoint - Width: 20px - 32px - Height: 20px - 26px - Extra Small Breakpoint - Width: 20px - 32px - Height: 20px - 22px The icon 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. ### 7. Flyout Title It is recommended for this title to be the same text as the label for the top-level link it represents. - **Required:** Must be included for each flyout - **Type Style:** Indications Bar 1 - **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette ### 8. Flyout Body Text - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Footer - **Color:** NEUTRAL_60, changeable within site color palette ## Subnavigation Flyout Sections The links for subnavigation inside a flyout are contained in these organized sections. While the title for the sections are optional, at least one section with at least one link must be included when using a flyout. Each configuration here is repeated for each of the sections, up to a maximum of 2 sections. - **Number of Sections:** 1-2 ### 9. Subnavigation Flyout Section Title - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Text Link 2 - **Color:** NEUTRAL_70 (Dark Gray), changeable within site color palette ## Subnavigation Flyout Section Links Each section of subnavigation links in a flyout can have up to 4 links, for a total possible maximum of 8 links in each flyout. Each configuration here is repeated for each of the subnavigation links in the section, up to a maximum of 4 links. - **Number of Subnavigation Links:** 1-4 ### 10. Subnavigation Flyout Section Link - **Optional:** Can be excluded, component collapses to hide unused space - **Type Style:** Text Link 2 - **Color:** PRIMARY_04 (Brand Quaternary), changeable within site color palette - **Click Action:** Links to an internal page on the site <!-- ## Social Icon Links The navigation can optionally include icon-based links that can direct users to relevant social media pages for the site. Each configuration here is repeated for each of the social icon links, up to a maximum of 3 links. - **Number of Social Icon Links:** 0-3 ### 11. Social Icon Link - **Optional:** Can be excluded, component collapses to hide unused space - **Click Action:** Links to a URL - **Dimensions:** - Extra Large Breakpoint - Width: 12px - Height: 12px - Large Breakpoint - Width: 12px - Height: 12px - Medium Breakpoint - Width: 12px - Height: 12px - Extra Small Breakpoint - Width: 12px - Height: 12px The icon for this component otherwise follows the standard requirements outlined in the [Iconography](/YLCpMmOwQveS0YQu294Hng) page of this documentation. Please refer to that page for full details on its configurations and options. --> ## Resources ### CMS Instructions #### Secondary Navigation Configuration Page Administration A site administrator can configure the look and feel of components on the Secondary 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 Secondary** library: ![Configuration Library](https://hackmd.io/_uploads/SyTF06ePc.png) **Step 2:** Review the available settings within the Edit Navigation secondary configuration page: ![Secondary Navigation Config Page](https://hackmd.io/_uploads/r1o1tR9X5.png) Mandatory entries include: - **Logo Full** - Logo image. Can set attributes for full-sized, open state logo image. - **Alternative text** - alternate text for full-sized, open state logo to be used by screen readers and search engines. - **Logo Reduced** - small logo image. Can set attributes for reduced-sized, collapsed state logo image. - **Alternative text** - can set alternate text for reduced-sized, collapsed state logo to be used by screen readers and search engines. Optional entry include: - **Logo Primary Navigation** - logo moved to the primary navigation (out of scope for MVP). If this image is not uploaded, secondary navigation will use the first full size logo in place of it, just reducing it in size to fit the available area. - **Alternative text** <!--The figure below describes secondary navigation components: ![Secondary Navigaton](https://hackmd.io/_uploads/Bys2hq9Ec.png)--> **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. ![Secondary Navigation Update](https://hackmd.io/_uploads/HJwacA9m9.png) #### Secondary Navigation Menu Items Administration Additionally, a site Administrator can manage the Secondary 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 **Secondary navigation** item: ![Menus List](https://hackmd.io/_uploads/ByvfsRcQ9.png) **Step 2:** Under the Menu Link, Secondary navigation supports three (3) menu levels. ![Navigation Menu Configuration Page](https://hackmd.io/_uploads/rkR2oAcmc.png) **Step 3:** Click the **Edit** button under Operations on the the **Components** menu link within the first menu level. ![Edit Menu Link Configuration](https://hackmd.io/_uploads/S19JnAqmq.png) Mandatory menu links configuration entries include: - **Menu link title** - title of the menu link. - **Link** - the location this menu link points to. Can be internal path or external URL. - **Attributes** - **Target** : Open in New Window or Same Window - **Subnav icon** - media item representing the sub navigation icon Optional menu links configuration entries include: - **Attributes** - **Rel** - **Class** - **Enabled** - Flag denoting whether the link should be enabled in menus or hidden - **Description** - Shown when user hovers over the menu link - **Shown as Expanded** - Checkbox when enabled and this menu has children, the menu will always display expanded. - **Parent link** - default as the immediately higher or parent link. - **Weight** - represents relative positioning within the same menu. Links with high weight will sink and links with a low weight will be positioned nearer the top **Step 4:** Change the value of the **Description** field as you need: ![Edit Secondary Navigation Menu](https://hackmd.io/_uploads/S1CWhA9m9.png) **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, and hover on the **Components** menu link to test your change. ![Updated Secondary Menu Items](https://hackmd.io/_uploads/BJ8S2C9Xc.png)