Skip to main content

Steps Component

The Steps component provides configurable multi-level numbering for nested ordered lists. It allows you to customize the numbering style for up to three levels of nesting while maintaining clean, semantic HTML structure.

Basic Usage​

Simple Numbered List​

<Steps>
  <ol>
    <li>First main step</li>
    <li>Second main step</li>
    <li>Third main step</li>
  </ol>
</Steps>

Result:

  1. First main step
  2. Second main step
  3. Third main step

Two-Level Nested List​

<Steps>
  <ol>
    <li>First main step</li>
    <li>
      Second main step
      <ol>
        <li>Substep A</li>
        <li>Substep B</li>
      </ol>
    </li>
    <li>Third main step</li>
  </ol>
</Steps>

Result:

  1. First main step

  2. Second main step

    1. Substep A
    2. Substep B
  3. Third main step

Three-Level Deep Nesting​

<Steps>
  <ol>
    <li>
      Install required software
      <ol>
        <li>Download the installer</li>
        <li>
          Run the installation
          <ol>
            <li>Accept the license</li>
            <li>Choose installation directory</li>
            <li>Configure options</li>
          </ol>
        </li>
        <li>Restart your system</li>
      </ol>
    </li>
    <li>
      Configure your environment
      <ol>
        <li>Set environment variables</li>
        <li>Update your PATH</li>
      </ol>
    </li>
    <li>Verify installation</li>
  </ol>
</Steps>

Result:

  1. Install required software

    1. Download the installer

    2. Run the installation

      1. Accept the license
      2. Choose installation directory
      3. Configure options
    3. Restart your system

  2. Configure your environment

    1. Set environment variables
    2. Update your PATH
  3. Verify installation

Custom Numbering Styles​

All Roman Numerals​

<Steps level1="upper-roman" level2="lower-roman" level3="decimal">
  <ol>
    <li>
      Planning Phase
      <ol>
        <li>
          Requirements gathering
          <ol>
            <li>Stakeholder interviews</li>
            <li>Technical assessment</li>
            <li>Risk analysis</li>
          </ol>
        </li>
        <li>Resource allocation</li>
      </ol>
    </li>
    <li>
      Implementation Phase
      <ol>
        <li>Development</li>
        <li>Testing</li>
      </ol>
    </li>
    <li>Deployment Phase</li>
  </ol>
</Steps>

Result:

  1. Planning Phase

    1. Requirements gathering

      1. Stakeholder interviews
      2. Technical assessment
      3. Risk analysis
    2. Resource allocation

  2. Implementation Phase

    1. Development
    2. Testing
  3. Deployment Phase

Alphabetical with Decimal Sub-steps​

<Steps level1="upper-alpha" level2="decimal" level3="lower-alpha">
  <ol>
    <li>
      Data Collection Methods
      <ol>
        <li>
          Surveys and questionnaires
          <ol>
            <li>Online surveys</li>
            <li>Paper-based surveys</li>
            <li>Phone interviews</li>
          </ol>
        </li>
        <li>Focus groups</li>
        <li>Observational studies</li>
      </ol>
    </li>
    <li>
      Data Analysis Techniques
      <ol>
        <li>Quantitative analysis</li>
        <li>Qualitative analysis</li>
      </ol>
    </li>
    <li>Reporting and Documentation</li>
  </ol>
</Steps>

Result:

  1. Data Collection Methods

    1. Surveys and questionnaires

      1. Online surveys
      2. Paper-based surveys
      3. Phone interviews
    2. Focus groups
    3. Observational studies

  2. Data Analysis Techniques

    1. Quantitative analysis
    2. Qualitative analysis
  3. Reporting and Documentation

Simple Two-Level with Upper-Alpha Secondary​

<Steps level1="decimal" level2="upper-alpha">
  <ol>
    <li>
      Prepare materials
      <ol>
        <li>Gather tools</li>
        <li>Set up workspace</li>
        <li>Review instructions</li>
      </ol>
    </li>
    <li>
      Execute procedure
      <ol>
        <li>Follow safety protocols</li>
        <li>Complete each step in order</li>
        <li>Document results</li>
      </ol>
    </li>
    <li>Clean up and finalize</li>
  </ol>
</Steps>

Result:

  1. Prepare materials

    1. Gather tools
    2. Set up workspace
    3. Review instructions

  2. Execute procedure

    1. Follow safety protocols
    2. Complete each step in order
    3. Document results
  3. Clean up and finalize

Real-World Use Cases​

Assessment Procedures​

<Steps>
  <ol>
    <li>
      Initial Assessment
      <ol>
        <li>Review submission requirements</li>
        <li>
          Verify completeness
          <ol>
            <li>Check all required fields</li>
            <li>Validate file formats</li>
            <li>Confirm supporting documentation</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>
      Technical Review
      <ol>
        <li>Schema validation</li>
        <li>Content quality check</li>
        <li>Compliance verification</li>
      </ol>
    </li>
    <li>Final Approval Process</li>
  </ol>
</Steps>

Result:

  1. Initial Assessment

    1. Review submission requirements

    2. Verify completeness

      1. Check all required fields
      2. Validate file formats
      3. Confirm supporting documentation

  2. Technical Review

    1. Schema validation
    2. Content quality check
    3. Compliance verification
  3. Final Approval Process

Manifestation Assessment with Components​

<Steps>
  <ol>
    <li>
      Carry out a preliminary assessment of the manifestation
    </li>
    <li>
      How does the manifestation describe itself?
      <ol>
        {/* <li><Mandatory />Record <InLink href="/docs/statements/1025">has manifestation statement</InLink> elements</li>
        <li><Mandatory />Record <InLink href="/docs/statements/1028">has manifestation statement of title and responsibility</InLink> elements</li>
        <li>Record <InLink href="/docs/notes/1200">has note on manifestation statement</InLink> elements</li> */}
        <li><Mandatory />Record has manifestation statement elements</li>
        <li><Mandatory />Record has manifestation statement of title and responsibility elements</li>
        <li>Record has note on manifestation statement elements</li>
      </ol>
    </li>
    <li>
      What appellations are used to label the manifestation?
      <ol>
        <li>
          {/* <Mandatory />Record <InLink href="/docs/relationships/1274">has appellation of manifestation</InLink> elements */}
          <Mandatory />Record has appellation of manifestation elements
          <ol>
            {/* <li>Record <InLink href="/docs/relationships/1037">has title of manifestation</InLink> elements</li>
            <li>Record <InLink href="/docs/relationships/1111">has identifier of manifestation</InLink> elements</li> */}
            <li>Record has title of manifestation elements</li>
            <li>Record has identifier of manifestation elements</li>
            <li>
              {/* Record <InLink href="/docs/relationships/1234">has access point of manifestation</InLink> elements */}
              Record has access point of manifestation elements
              <ol>
                {/* <li><Mandatory />Record <InLink href="/docs/relationships/1257">has authorized access point of manifestation</InLink> elements</li> */}
                <li><Mandatory />Record has authorized access point of manifestation elements</li>
              </ol>
            </li>
            {/* <li>Record <InLink href="/docs/notes/1273">has note on nomen associated with manifestation</InLink> elements</li> */}
            <li>Record has note on nomen associated with manifestation elements</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</Steps>

Result:

  1. Carry out a preliminary assessment of the manifestation

  2. How does the manifestation describe itself?

    1. ✽Record has manifestation statement elements
    2. ✽Record has manifestation statement of title and responsibility elements
    3. Record has note on manifestation statement elements

  3. What appellations are used to label the manifestation?

    1. ✽Record has appellation of manifestation elements

      1. Record has title of manifestation elements
      2. Record has identifier of manifestation elements

      3. Record has access point of manifestation elements

        1. ✽Record has authorized access point of manifestation elements
      4. Record has note on nomen associated with manifestation elements

Installation Guide​

<Steps level1="decimal" level2="lower-alpha" level3="lower-roman">
  <ol>
    <li>
      System Requirements
      <ol>
        <li>
          Hardware requirements
          <ol>
            <li>Minimum RAM: 8GB</li>
            <li>Storage: 20GB available</li>
            <li>Processor: 2GHz dual-core</li>
          </ol>
        </li>
        <li>Software dependencies</li>
      </ol>
    </li>
    <li>
      Installation Steps
      <ol>
        <li>Download installer</li>
        <li>Run installation wizard</li>
        <li>Configure settings</li>
      </ol>
    </li>
  </ol>
</Steps>

Result:

  1. System Requirements

    1. Hardware requirements

      1. Minimum RAM: 8GB
      2. Storage: 20GB available
      3. Processor: 2GHz dual-core
    2. Software dependencies

  2. Installation Steps

    1. Download installer
    2. Run installation wizard
    3. Configure settings

Research Methodology​

<Steps level1="upper-roman" level2="upper-alpha" level3="decimal">
  <ol>
    <li>
      Literature Review
      <ol>
        <li>
          Database Searches
          <ol>
            <li>Academic databases</li>
            <li>Professional repositories</li>
            <li>Grey literature sources</li>
          </ol>
        </li>
        <li>Citation Management</li>
      </ol>
    </li>
    <li>
      Data Collection
      <ol>
        <li>Participant Recruitment</li>
        <li>Data Gathering Protocols</li>
      </ol>
    </li>
  </ol>
</Steps>

Result:

  1. Literature Review

    1. Database Searches

      1. Academic databases
      2. Professional repositories
      3. Grey literature sources
    2. Citation Management

  2. Data Collection

    1. Participant Recruitment
    2. Data Gathering Protocols

Component Props​

PropTypeDefaultDescription
level1string'decimal'Numbering style for first level lists
level2string'lower-alpha'Numbering style for second level lists
level3string'lower-roman'Numbering style for third level lists
childrenReactNode-The ordered list content to be styled

Available Numbering Styles​

  • decimal - 1, 2, 3, 4...
  • lower-alpha - a, b, c, d...
  • upper-alpha - A, B, C, D...
  • lower-roman - i, ii, iii, iv...
  • upper-roman - I, II, III, IV...

Accessibility Features​

The Steps component maintains semantic HTML structure:

  • Uses proper <ol> and <li> elements for screen readers
  • Preserves hierarchical relationships between list levels
  • Maintains keyboard navigation through list items
  • Custom numbering is visual-only and doesn't affect screen reader interpretation
  • Works with all assistive technologies that support standard HTML lists

Implementation Notes​

Technical Architecture​

The component uses CSS custom properties to apply numbering styles:

  • Wraps content in a container with data-* attributes
  • CSS maps attributes to custom properties
  • Nested selectors apply appropriate styles to each level
  • No JavaScript required - pure CSS solution

Global Availability​

The Steps component is globally available in all MDX files through /portal/src/theme/MDXComponents.tsx. No imports are needed.

TypeScript Support​

interface StepsProps extends PropsWithChildren {
  level1?: string;
  level2?: string;
  level3?: string;
}

CSS Modules​

Uses styles.module.scss with scoped classes:

  • .steps - Main container
  • CSS custom properties: --steps-level1, --steps-level2, --steps-level3
  • Data attributes mapped to CSS variables

Bundle Size​

  • Component: ~1KB minified
  • Styles: ~2KB minified
  • Total: Less than 3KB

Browser Support​

  • All modern browsers (Chrome, Firefox, Safari, Edge)
  • Full support for CSS custom properties
  • Graceful degradation to default numbering in older browsers
  • Mobile browsers fully supported

Testing​

Component includes 5 comprehensive unit tests:

  • Renders children correctly
  • Applies default data attributes
  • Applies custom numbering styles via props
  • Maintains semantic HTML structure
  • Applies CSS module classes

Performance Considerations​

  • Pure CSS solution - no JavaScript overhead
  • No re-renders on prop changes
  • Minimal DOM manipulation
  • Efficient CSS selector usage

Best Practices​

  1. Consistent Nesting: Keep your nesting levels consistent within a document
  2. Logical Hierarchy: Use numbering styles that make sense for your content type
  3. Three Levels Max: Avoid going deeper than three levels for readability
  4. Semantic HTML: Always use proper <ol> and <li> elements inside Steps
  5. Content Length: Keep individual steps concise and actionable
  6. Line Breaks: When nesting content in <li> tags, use line breaks after the opening tag in MDX

Common Patterns​

Process Documentation​

<Steps level1="decimal" level2="lower-alpha" level3="lower-roman">

Legal/Formal Documents​

<Steps level1="upper-roman" level2="upper-alpha" level3="decimal">

Quick Reference/Checklists​

<Steps level1="decimal" level2="upper-alpha">

Academic/Research​

<Steps level1="upper-alpha" level2="decimal" level3="lower-alpha">

Troubleshooting​

MDX Parsing Issues​

If you encounter MDX parsing errors with nested lists:

  1. Line Breaks: Ensure <li> tags with nested content have line breaks after the opening tag
  2. Proper Nesting: Always close nested <ol> tags inside their parent <li>
  3. Consistent Indentation: Use consistent indentation for readability

Correct Format:

<li>
  Parent item text
  <ol>
    <li>Child item</li>
  </ol>
</li>

Incorrect Format:

<li>Parent item text
  <ol>
    <li>Child item</li>
  </ol>
</li>