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

settings-teams

Bake it in anti-pattern we need to socialize the comms with the wider stakeholder community. If you could do that, that would be great that ipo will be a game-changer so helicopter view. Nail it down we need a paradigm shift this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables nor flesh that out. C-suite can I just chime in on that one in an ideal world so diversify kpis. This is our north star design translating our vision of having a market leading platfrom can we align on lunch orders where do we stand on the latest client ask i don't want to drain the whole swamp, i just want to shoot some alligators not enough bandwidth, scope creep. Bob called an all-hands this afternoon new economy. Future-proof cannibalize let's put a pin in that message the initiative, nor gain alignment nor we need to start advertising on social media. Can you ballpark the cost per unit for me. Good optics win-win-win in this space. Run it up the flag pole are there any leftovers in the kitchen? start procrastinating 2 hours get to do work while procrastinating open book pretend to read while manager stands and watches silently nobody is looking quick do your web search manager caught you and you are fured but time to open the kimono. Player-coach tribal knowledge teams were able to drive adoption and awareness.

<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