Breadcrumb.js

import React from 'react';
import { PureComponent } from './BaseComponent';
import { opacity, space } from '../theme';

const data = [
  {
    id: 'your-policy',
    children: 'Your Policy',
  },
  {
    id: 'account',
    children: 'Account',
  },
  {
    id: 'objective',
    children: 'Objective',
  },
  {
    id: 'personal-info',
    children: 'Personal Info',
  },
  {
    id: 'beneficiaries',
    children: 'Beneficiaries',
  },
  {
    id: 'bank-info',
    children: 'Bank Info',
  },
  {
    id: 'review-and-sign',
    children: 'Review & Sign',
  },
];

export default class Breadcrumb extends PureComponent {
  template(css) {
    return (
      <nav className={css('root')}>
        <ul className={css('list')}>
          {data.map(({ children, id }, index) => (
            <li key={index} className={css('sub3', 'item')} id={id}>
              <a className={css('resetLink', 'link')} href={`#${id}`}>
                {children}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    );
  }

  styles() {
    const bulletSize = '14px';

    return {
      root: { padding: 100 },
      list: {},
      item: {
        textAlign: 'right',
        transition: 'opacity 0.15s linear',
        position: 'relative',
        ':not(:last-of-type)': { paddingBottom: space(24) },
        ':target ~ li:not(:hover)': { opacity: opacity(1) },
        ':before, :after': {
          content: '""',
          position: 'absolute',
        },
        ':not(:last-of-type):before': {
          width: 1,
          height: `calc(100% - ${bulletSize})`,
          right: -1,
          top: bulletSize,
          marginTop: '0.4rem',
          borderRight: '1px solid currentColor',
        },
        ':after': {
          content: '"●"',
          fontSize: '80%',
          right: `calc(calc(${bulletSize} * 0.5}) * -1)`,
        },
      },
      resetLink: {
        color: 'currentColor',
        textDecoration: 'none',
      },
      link: { padding: space(24) },
    };
  }
}