Side Navigation

A side navigation bar for DialLink applications.

Static Collection

The side navigation component can either render static or dynamic collections of data. For simple navigation components that need to render a list of pre-defined data a static collection should be used. Static collections cannot be changed over time.

<SideNavigation>
  <Item key='link-one'>One</Item>
  <Item key='link-two'>Two</Item>
  <Item key='link-three'>Three</Item>
  <Item key='link-four'>Four</Item>
  <Item key='link-five'>Five</Item>
</SideNavigation>

<SideNavigation>
  <Item key='link-one'>One</Item>
  <Item key='link-two'>Two</Item>
  <Item key='link-three'>Three</Item>
  <Item key='link-four'>Four</Item>
  <Item key='link-five'>Five</Item>
</SideNavigation>

<SideNavigation>
  <Item key="link-one">
    One
  </Item>
  <Item key="link-two">
    Two
  </Item>
  <Item key="link-three">
    Three
  </Item>
  <Item key="link-four">
    Four
  </Item>
  <Item key="link-five">
    Five
  </Item>
</SideNavigation>

Dynamic Collection

For data that is non-static, such as data fetched from a backend, the side navigation component supports dynamic collections. Dynamic collections support adding, updating and removing of the data that is being rendered.

function Example() {
  const items = [
    {
      key: 'section_1',
      title: 'All',
      items: [
        {
          id: 'all',
          label: 'All contacts',
          description: 'All contacts in your organization.',
          iconName: 'ContactBookIcon'
        }
      ]
    },
    {
      key: 'section_2',
      title: 'Other',
      items: [
        {
          id: 'favorites',
          label: 'Favorites',
          description: 'Your favorite contacts.',
          iconName: 'StarGroupIcon'
        },
        {
          id: 'colleagues',
          label: 'Colleagues',
          description: 'Your colleagues.',
          iconName: 'DialLinkIcon'
        },
        {
          id: 'external',
          label: 'Externals',
          description: 'Your external contacts.',
          iconName: 'BriefcaseIcon'
        }
      ]
    }
  ];

  return (
    <div style={{ width: '300px' }}>
      <SideNavigation
        heading="Contacts"
        items={items}
        shouldFocusWrap
        selectionMode="single"
      >
        {(section) => {
          return (
            <Section
              key={section.key}
              title={section.title}
              items={section.items}
            >
              {(item) => (
                <Item key={item.id} textValue={item.label}>
                  <a href="#">
                    <Icon name={item.iconName} variant="solid" />
                    <Text>{item.label}</Text>
                    <Description>{item.label}</Description>
                  </a>
                </Item>
              )}
            </Section>
          );
        }}
      </SideNavigation>
    </div>
  );
}

function Example() {
  const items = [
    {
      key: 'section_1',
      title: 'All',
      items: [
        {
          id: 'all',
          label: 'All contacts',
          description: 'All contacts in your organization.',
          iconName: 'ContactBookIcon'
        }
      ]
    },
    {
      key: 'section_2',
      title: 'Other',
      items: [
        {
          id: 'favorites',
          label: 'Favorites',
          description: 'Your favorite contacts.',
          iconName: 'StarGroupIcon'
        },
        {
          id: 'colleagues',
          label: 'Colleagues',
          description: 'Your colleagues.',
          iconName: 'DialLinkIcon'
        },
        {
          id: 'external',
          label: 'Externals',
          description: 'Your external contacts.',
          iconName: 'BriefcaseIcon'
        }
      ]
    }
  ];

  return (
    <div style={{ width: '300px' }}>
      <SideNavigation
        heading="Contacts"
        items={items}
        shouldFocusWrap
        selectionMode="single"
      >
        {(section) => {
          return (
            <Section
              key={section.key}
              title={section.title}
              items={section.items}
            >
              {(item) => (
                <Item key={item.id} textValue={item.label}>
                  <a href="#">
                    <Icon
                      name={item.iconName}
                      variant="solid"
                    />
                    <Text>{item.label}</Text>
                    <Description>{item.label}</Description>
                  </a>
                </Item>
              )}
            </Section>
          );
        }}
      </SideNavigation>
    </div>
  );
}

function Example() {
  const items = [
    {
      key: 'section_1',
      title: 'All',
      items: [
        {
          id: 'all',
          label:
            'All contacts',
          description:
            'All contacts in your organization.',
          iconName:
            'ContactBookIcon'
        }
      ]
    },
    {
      key: 'section_2',
      title: 'Other',
      items: [
        {
          id:
            'favorites',
          label:
            'Favorites',
          description:
            'Your favorite contacts.',
          iconName:
            'StarGroupIcon'
        },
        {
          id:
            'colleagues',
          label:
            'Colleagues',
          description:
            'Your colleagues.',
          iconName:
            'DialLinkIcon'
        },
        {
          id: 'external',
          label:
            'Externals',
          description:
            'Your external contacts.',
          iconName:
            'BriefcaseIcon'
        }
      ]
    }
  ];

  return (
    <div
      style={{
        width: '300px'
      }}
    >
      <SideNavigation
        heading="Contacts"
        items={items}
        shouldFocusWrap
        selectionMode="single"
      >
        {(section) => {
          return (
            <Section
              key={section
                .key}
              title={section
                .title}
              items={section
                .items}
            >
              {(
                item
              ) => (
                <Item
                  key={item
                    .id}
                  textValue={item
                    .label}
                >
                  <a href="#">
                    <Icon
                      name={item
                        .iconName}
                      variant="solid"
                    />
                    <Text>
                      {item
                        .label}
                    </Text>
                    <Description>
                      {item
                        .label}
                    </Description>
                  </a>
                </Item>
              )}
            </Section>
          );
        }}
      </SideNavigation>
    </div>
  );
}