Navigation Button Share Button Utility Navigation

Start new inheritance: See note above in “Basic Authoring”

  1. Logo title: The title that appears next to the logo.
  2. Logo URL: The link that the logo and logo title will point to, can be internal or external.
  3. Logo Style: Select the type of logo you want your page to use. (Note: Some styles do not allow custom lockup text.)
  4. Logo Lockup Style: Sets the logo title style. Only use “Product” style if your site references an actual LinkedIn product.
  5. Menu tooltips: these tooltips are used only on the menu button for mobile and tablet.  By default they will read “Open menu” and “Close menu”.

Start new inheritance: See note above in “Basic Authoring”

  1. Collapse Navigation: When checked, the navigation links in the header will be collapsed into a hamburger menu in the desktop experience, similar to the experience in tablet and mobile views.
  2. URL: Specify an external path or select a path from the websites admin that the link will point to.
  3. Text: The user-facing text for the link.
  4. Tooltip: The tooltip that will appear when hovering over the link.
  5. Opens in… : Determine whether link will open in Same Window/Tab or New Window/Tab.  Generally speaking, the link should open in new tab whenever there is no way for visitor to navigate back to the current page.
  6. Secondary navigation: By default there will not be a secondary navigation.  Otherwise you can choose to display them as links or in a drawer.
    • As links: If this option is selected, your secondary navigation will automatically be populated with the Link List component, which you can then edit with your secondary navigation links.
    • As drawer: By default the drawer will contain 4 columns.  Click the “Inherited Column Frame” to control inheritance and change the number of columns.  Note that when no column headlines are entered for any of the columns in the navigation drawer, the content below will shift up to top of the column.  Within each column in the drawer, you can set the following:
      • Headline: This will be the column headline.
      • Content: Specify the link color.
      • Action: this will be the link at the bottom of the column.
  7. Reorder and/or delete navigation items using the controls next to each item.  Click the green + icon at the bottom of the list to add a new item.

Start new inheritance: See note above in “Basic Authoring”

  1. Display:
    • None: Select “None” if a button should not appear in the header.
    • Button: Displays a button to the user.
    • Button and drawer: Displays a button that will open a drawer when clicked.
  2. Button options:
    • Label: Set a label (the text that will be visible to the user)
    • Action: Select the action your button will take.
    • Tooltip: This is the tooltip that appears to the user when hovered over the button.
    • Link Settings: Select your URL path and how you want it to open.
  3. Button & Drawer options:
    • Button & menu text: This text is used on the button for all experiences, and as the menu title on mobile and tablet experiences.
    • Tooltip: This is the tooltip that appears to the user when hovered over the button.
    • Close tooltip: This is the tooltip that appears to the user when the drawer is expanded.
    • Drawer style: Choose from a small or large drawer style.  Small by default.

Social share buttons will appear in a dropdown menu when the share button has been enabled.  Social Share information must be set in the Social Share tab in Page Properties.

  1. Share button: Select “Enabled” for it to show in your header.  Select “Disabled” to hide.
  2. Button & menu text: This text will appear in the dropdown menu.
  3. Tooltip: The text that appears when hovered over the share icon.
  4. Close tooltip: This text is used on the close button on mobile and tablet experiences.
  5. Hide Services: Hide any of the following social services (LinkedIn, Facebook, Twitter, Google+).  If hidden, the tooltips will not display below.
  6. Tooltips: These are the tooltips that show up when the user is hovered over the social service.  Defaults are shown in light gray in the text fields.

The utility navigation sits above the global header and is also sticky.  It is for links that are not strictly related to content and helps users perform different options such as: login, reach support teams, submit forms, etc.

  1. Start New Inheritance: See note above in “Basic Authoring”
  2. Jump Link List (left): Check the ‘Start new inheritance’ box to enable the Jump Link List.  The Jump Link List shows up on the left side of the Utility Nav, and allows you to display additional links in a dropdown.
  3. Jump Link Accessibility Text: Text that will be read by screenreaders.
  4. Heading: The user-facing text of your dropdown
  5. Links: Authors can set up to five links in the link list. Enter the link text that displays to the user, and the actionable content for the link.
  6. Reorder and/or delete navigation items using the controls next to each item.  Click the green + icon at the bottom of the list to add a new item.
  7. Free links: The free links show up on the right side of the navigation.  Select Start New Inheritance to enable the free links.
  8. Message: Enter an instructional message here.
  9. Links: Add up to three links and choose from the option to add a link, live chat session, or phone number.
  10. Reorder and/or delete navigation items using the controls next to each item.  Click the green + icon at the bottom of the list to add a new item.

Do's & Don'ts

The Header component has very limited real estate. Be considerate of these space limitations when designing your navigation.