SCS Nav

Navigation Bar for Apps on Splunk Cloud Services platform.

• You can find the source code for the package in the workflow-components repo
• You can ask the team questions in the slack channel #swp-workflow-components
• You can request new features by creating a JIRA Story
• You can report a bug by creating a JIRA Bug

Install

npm install @splunk/[email protected]

Or

yarn add @splunk/[email protected]

Imports

Components

import Nav, {
    MenuItem,
    AppNavItem,
    AppNavDropdown,
    AboutIcon,
    FeedbackIcon,
    HelpIcon,
    SettingsIcon,
} from '@splunk/react-scs-nav/';

Providers

import NavProvider from '@splunk/react-scs-nav/NavProvider';
import NavMockProvider from '@splunk/react-scs-nav/NavMockProvider';

Themes

import themes from '@splunk/react-scs-nav/themes';

Configuring your app for compatibility

Logo

Place your logo file in the root of your application. It should be 48 pixels tall with no margins or padding.

/logo-dark-48.png

App Switcher

The app switcher will pass in the tenant via a query string parameter. This allows you to determine your own url schema. Additional parameters may be added in the future, such as locale.

/r/switchApp?tenantName=demotenant

Redirecting with react-router and IE 11 support:

import queryString from 'query-string';

...

<Route
    path="/r/switchApp"
    render={props => (
        <Redirect
            to={`/${queryString.parse(props.location.search).tenantName}/`}
        />
    )}
/>

Redirecting with react-router and no IE 11 support:

<Route
    path="/r/switchApp"
    render={props => (
        <Redirect
            to={`/${new URLSearchParams(props.location.search).get('tenantName')}/`}
        />
    )}
/>