Skip to main content

Set Up and Configure Side Navigation

Bind one SharePoint list of links, map Title and the roles you need, then add the same web part on other pages and point it at that list. Roles are not fixed column names. The selected view sets the order. See How Zenpo Web Parts Use Your SharePoint Data.

The property pane groups are License, Data, Field mapping, Layout, and Appearance (web part only). Controls that do nothing for the current configuration are hidden, not disabled. The View picker stays disabled until a list is chosen.

1. Add the web part​

  1. Edit a SharePoint Online modern page.
  2. Add a web part and type Zenpo.
  3. Choose Zenpo Side Navigation from Text, media, and content.

Until a list is connected, editors see Configure Side Navigation and Connect a SharePoint list of links and map a Title column to start the navigation.

Under Data:

  1. Set Heading if you want a title. The placeholder is Optional title above the links.
  2. Pick Data source (list) and a View. The pane states The view sets the order the links appear in — there is no separate sort setting.
  3. Set Cache duration. The default is 15 minutes (recommended). Other list-bound parts default to 5 minutes. This part defaults to 15.
  4. Leave Show only active items on if you mapped Active. The control is hidden when Active is unmapped. Toggling it never reloads the list.

If you would rather start from sample links, use Create starter list. That creates a list named Navigation links on this site with 8 sample links, then connects this web part to it. The link appears only if you can manage lists. See Create Starter Lists with Sample Data.

The seed includes two sub-item rows and one inactive row. The sub-item rows appear only when Sub-items is set to Expand in place, so a first run shows 6 of the 8 rows. That is expected.

3. Map fields​

Under Field mapping, map:

  • Title (required)
  • Link
  • Image and Color (hidden when Visual placement is None)
  • Description
  • Active
  • Parent / Group

Unmapped optional roles render nothing. Changing the list resets mappings. Changing only the view keeps them.

A row with no link, or an invalid one, renders as a non-interactive header row.

Item colors honor real hex values. Otherwise a stable color is derived from the title.

4. Set layout​

Under Layout:

  • Visual placement: Leading, Trailing (default), Top, or None
  • Visual width: 25 to 50, default 40 (hidden for Top and None)
  • Density: Comfortable (default) or Compact
  • Row height: 48 to 112, default 76 (hidden in Compact)
  • Content alignment: Left (default), Center, or Right
  • Show descriptions: off by default (hidden when Description is unmapped or Density is Compact)
  • Dividers: None (default), Hairline, or Full rule
  • Sub-items: Off (default) or Expand in place (hidden without a Parent mapping)
  • Highlight current page: on by default
  • Open links in: Same tab (default) or New tab

Wide containers (560 pixels and up) flow rows into a responsive grid. At 640 pixels of viewport width and below, the rail collapses to a 48-pixel header row. The heading fallback is Side Navigation. The expanded phone list is text-first: no tiles or descriptions, and the current page's parent opens automatically. There are no mobile-specific settings.

5. Set appearance​

Under Appearance (web part only):

  • Color vibe, with the note Corner radius resets to the theme default when this changes.
  • Accent color
  • Use item colors (off by default; hidden when placement is None)
  • Corner radius (0 to 20, default 4)
  • Border (on by default)
  • Shadow: None (default), Subtle, or Medium
  • Spacing (0 to 24, default 2)

Appearance applies to this web part only. See Appearance Settings: Color Vibe, Accent Color, and Corner Radius.

Share one list across pages​

Add Zenpo Side Navigation to each page and point every instance at the same list and view. Edit the list once. Every page showing it stays current. Content is cached in the browser. This part defaults to 15 minutes (recommended).

Last updated on