Navigator

Status	stable
Published	2.0.0

This document is a work in progress.

You can take a look, but nothing in here is set in stone.

Example

<div class="jds-relative">
    <jds-navigator-layout>
        <template #navigator>
            <jds-navigator>
                <jds-navigator-back-link :to="{}">
                    Back to all jobs
                </jds-navigator-back-link>
                <jds-navigator-heading>Senior Pancake Flipper
                    <template #subtitle><jds-link>#33</jds-link></template>
                </jds-navigator-heading>
                <jds-navigator-item class="" :to="nav('overview')">Overview
                </jds-navigator-item>
                <jds-navigator-item :to="nav('candidates')" icon="invoice">
                    <template #default>Candidates</template>
                    <template #right>
                        <jds-navigator-badge active counter="2"/>
                        <jds-navigator-badge counter="135"/>
                    </template>
                </jds-navigator-item>
                <jds-navigator-item-group title="Job">
                    <jds-navigator-item :to="nav('details')">Details</jds-navigator-item>
                    <jds-navigator-item :to="nav('description')" disabled>
                        Description
                        <template #disabledHint>Unavailable without a job list.</template>
                    </jds-navigator-item>
                    <jds-navigator-item :to="nav('analytics')">
                        <template #default>Analytics</template>
                        <template #right>
                            <jds-navigator-badge counter="1"/>
                        </template>
                    </jds-navigator-item>
                    <jds-navigator-item :to="nav('settings')">
                        <template #default>Settings</template>
                        <template #children>
                            <jds-navigator-child-item :to="nav('settings-pipeline')">
                                Pipeline configuration
                            </jds-navigator-child-item>
                            <jds-navigator-child-item :to="nav('settings-teams')">
                                Teams &amp; permissions
                            </jds-navigator-child-item>
                            <jds-navigator-child-item :to="nav('settings-actions')" last>
                                <jds-icon>
                                    <jds-glyph for="actions"/>
                                </jds-icon>
                                Actions
                            </jds-navigator-child-item>
                        </template>
                    </jds-navigator-item>
                </jds-navigator-item-group>

                <jds-navigator-item-group title="Application form">
                    <jds-navigator-item :to="nav('app-form')" size="small">
                        <template #icon>
                            <jds-glyph for="form"/>
                        </template>
                        <template #default>Application Form</template>
                    </jds-navigator-item>
                </jds-navigator-item-group>

                <jds-navigator-item-group title="Follow-ups" can-add>
                    <jds-navigator-item :to="nav('form-1')" size="small">
                        <template #icon>
                            <jds-glyph for="additional-form"/>
                        </template>
                        <template #default>Language & Experience Proficiency Form</template>
                        <template #children>
                            <jds-navigator-child-item :to="nav('form-1/analytics')">
                                Analytics
                            </jds-navigator-child-item>
                            <jds-navigator-child-item :to="nav('form-1/analytics')">
                                A new page we haven't even thought about so far
                            </jds-navigator-child-item>
                            <jds-navigator-child-item :to="nav('form-2/analytics')" last>
                                Settings
                            </jds-navigator-child-item>
                        </template>
                    </jds-navigator-item>
                    <jds-navigator-item :to="nav('app-form')" size="small">
                        <template #icon>
                            <jds-glyph for="additional-form"/>
                        </template>
                        <template #default>Licenses & Permits Form</template>
                    </jds-navigator-item>
                </jds-navigator-item-group>
            </jds-navigator>
        </template>
        <template #default>
            <router-view/>
        </template>
    </jds-navigator-layout>

</div>

If you have a default page you arrive on when this navigator appears, it should be the first item in the navigator.

JdsNavigator

Slots

Slot
default Required	Contents of this navigator. In general, only Navigator sub-components fit here.

Changelog

Related Components

Full-Page Layout

jds-navigator-full-page-layout positions the navigator alongside its contents, including room for the collapsed main navigation on the left. This fills up all available screen real-estate, which is the most common use case.

A variant called jds-navigator-layout, which does not fill up the full screen space, is used in the demonstration above, but is not intended for use.

JdsNavigatorFullPageLayout

Methods

Method	Parameters
close	-	Forcibly close the navigator.

Slots

Slot
navigator Required	The navigator goes here.
default Required	The navigated content goes here — often simply a `router-link` component.

Changelog

Back Link

This link should take the user to the owner of this page, or one step up in the hierarchy. Optional.

Back to All People

<jds-navigator-back-link :to="{}">Back to All People</jds-navigator-back-link>

JdsNavigatorBackLink

Props

Prop	Value	Default
to Required	`Location`	none	Where to navigate to on click.

Slots

Slot
default Required	Label for the back link.

Changelog

Heading

Main identifier for the entity being navigated, or the section of app the user is in.

JdsNavigatorHeading

Slots

Slot
default Required	Heading text.
subtitle	Subtitle text, suitable for links or an extra identifier.

Changelog

Item

JdsNavigatorItem

Props

Prop	Value	Default
size	`string`	"medium"
to	`Locationstring`	none
icon	`string`	none
exact	`boolean`	false	Passed into the router-link as the `exact` prop.
disabled	`boolean`	false
exactPath	`boolean`	false	Passed into the router-link as the `exact-path` prop.

Slots

Slot
default
right
disabledHint
children

Changelog

Item Group

JdsNavigatorItemGroup

Props

Prop	Value	Default
canAdd	`boolean`	false
addTo	`Locationnull`	null
title	`string`	(Empty string)

Events

Event	Payload
add

Slots

Slot
default

Changelog

Badge

JdsNavigatorBadge

Props

Prop	Value	Default
counter	`number`	none
active	`boolean`	none

Changelog

Child Item

JdsNavigatorChildItem

Props

Prop	Value	Default
last	`boolean`	false
to	`Location`	none
exact	`boolean`	false	Passed into the router-link as the `exact` prop.
disabled	`boolean`	false

Slots

Slot
default
disabledHint