Feature Request / Enhancement: Navigation Menu

[ccw0505]

Is there any plan to include navigation menu as a component in Polaris?

Reason

We like to apply Polaris to our non-embedded apps, while building embed the key feature into Shopify admin as an embed app. Most of Polaris components fit our requirement except there is no component about the navigation menu. This use case should be applicable to many top apps in the app store.

[ry5n]

Thanks for the request. We’re aware that non-embedded apps do need components for the outer frame of the app, including navigation. We’re strongly considering adding these to Polaris.

We’ve added a bunch of components that are planned, under consideration and not panned to the new component status page, so keep an eye on that for future updates: https://polaris.shopify.com/components/component-status#navigation

For the moment, I’d like to close this and track it as a feature request on our backlog. Issues in that backlog get prioritized on an ongoing basis, and encourage everyone to vote for this feature by adding a 👍 to the original issue summary. Thanks!

💜

[ccw0505]

Great to know. Thanks!!

[ccw0505]

@ry5n any idea when will component for navigation bar be launching?

We wonder if we should build that directly first.

[ry5n]

We’re working on an AppFrame component now. It will include the top bar and a side navigation area. It’s just a matter of when we’ll be ready to release, and if that fits your schedule. Do you know when you need it by?

[ccw0505]

we plan to launch by end of Q3 (Sep)

[ccw0505]

@ry5n - wonder if you have a rough timeline for this?

[ry5n]

We’re close; this could be released within 4 weeks, although I can’t promise we’ll hit that.

[ccw0505]

@ry5n good stuff. we will wait for that before building it ourself.

[zheren2018]

@ry5n hello, I also need this feature, wonder if you have the update time?

[ry5n]

We’re currently testing the new components internally. They’re not quire ready for official release but we’ve shipped some public betas if you want to start taking these for a spin:

yarn add @shopify/polaris@2.6.0-beta.9

Documentation isn’t available yet outside of the package. The main navigation component should be used with the new Frame component, so I’d recommend starting with node_modules/@shopify/polaris/docs/components/Frame/README.md.

Show example code

```jsx class FrameExample extends React.Component { defaultState = { emailFieldValue: 'ellen@ochoacrafts.com', nameFieldValue: 'Ochoa Crafts', }; state = { showToast: false, isLoading: false, isDirty: false, searchActive: false, searchText: '', userMenuOpen: false, showMobileNavigation: false, modalActive: false, nameFieldValue: this.defaultState.nameFieldValue, emailFieldValue: this.defaultState.emailFieldValue, storeName: this.defaultState.nameFieldValue, }; render() { const { showToast, isLoading, isDirty, searchActive, searchText, userMenuOpen, showMobileNavigation, nameFieldValue, emailFieldValue, modalActive, storeName, } = this.state; const toastMarkup = showToast ? ( ) : null; const navigationUserMenuMarkup = ( ); const contextualSaveBarMarkup = ( ); const userMenuMarkup = ( ); const searchResultsMarkup = ( ); const searchFieldMarkup = ( ); const topBarMarkup = ( ); const navigationMarkup = ( ); const loadingMarkup = isLoading ? : null; const actualPageMarkup = ( ); const loadingPageMarkup = ( ); const pageMarkup = isLoading ? loadingPageMarkup : actualPageMarkup; const modalMarkup = (

Sell your products directly on Instagram by tagging products in your posts, to create a seamless shopping experience for your customers.

); const theme = { colors: { topBar: { background: '#108043', }, }, logo: { width: 104, topBarSource: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-white.svg', contextualSaveBarSource: 'https://cdn.shopify.com/shopify-marketing_assets/static/shopify-full-color-black.svg', }, }; return ( {contextualSaveBarMarkup} {loadingMarkup} {pageMarkup} {toastMarkup} {modalMarkup} ); } toggleState = (key) => { return () => { this.setState((prevState) => ({[key]: !prevState[key]})); }; }; handleSearchFieldChange = (value) => { this.setState({searchText: value}); if (value.length > 0) { this.setState({searchActive: true}); } else { this.setState({searchActive: false}); } }; handleSearchResultsDismiss = () => { this.setState(() => { return { searchActive: false, searchText: '', }; }); }; handleEmailFieldChange = (emailFieldValue) => { this.setState({emailFieldValue}); if (emailFieldValue != '') { this.setState({isDirty: true}); } }; handleNameFieldChange = (nameFieldValue) => { this.setState({nameFieldValue}); if (nameFieldValue != '') { this.setState({isDirty: true}); } }; handleSave = () => { this.defaultState.nameFieldValue = this.state.nameFieldValue; this.defaultState.emailFieldValue = this.state.emailFieldValue; this.setState({ isDirty: false, showToast: true, storeName: this.defaultState.nameFieldValue, }); }; handleDiscard = () => { this.setState({ emailFieldValue: this.defaultState.emailFieldValue, nameFieldValue: this.defaultState.nameFieldValue, isDirty: false, }); }; } ```

[ry5n]

Reopening as this is under active development for near-term release.

[zheren2018]

Great to know. Thanks!!

[zheren2018]

@ry5n Wonder if you have the official release update time?

[ry5n]

I’m not able to give a specific date for release. Feel free to try the beta release (latest at the time of writing is 2.8.0-rc.2) and file issues if you run into any problems.

[janklimo]

@ry5n It looks like this has been released in 3.0.0. Ready to be closed?