Skip to content

StructuredNavigation Component

Dananji Withana edited this page Oct 28, 2024 · 11 revisions

When there is structural properties (structures) present in the IIIF manifest, the relevant data is fed to the StructuredNavigation component via the central state management system. Therefore this component must always be wrapped by IIIFPlayer.


Props Explained

StructuredNavigation component accepts the following props to customize the UI when displaying collapsible structures (beta);

  • showAllSectionsButton: accepts a Boolean value, which has a default value of false and is not required. This allows to display the collapse/expand all sections button above the structure for manifests with collapsible structures.
  • sectionsHeading: accepts a String value, which has a default value of Sections and is not required. This allows to customize the text that is shown next to collapse/expand all sections button at the top of collapsible structures.

How to use the StructuredNavigation component?

Using with the IIIFPlayer:

import {
  IIIFPlayer,
  MediaPlayer,
  StructuredNavigation
} from '@samvera/ramp';
import 'video.js/dist/video-js.css';
import '@samvera/ramp/dist/ramp.css';

<IIIFPlayer manifestUrl=manifestUrl manifest=manifest>
    <MediaPlayer />
    <StructuredNavigation />
</IIIFPlayer>

There are no props required by the StructuredNavigation component, because all the relevant data is fed through the central state management system.