I’m working on a Spotify app and having trouble with navigation. I have three tabs (let’s call them Tab1, Tab2, and Tab3) that work fine with the standard navigation.
sp.core.addEventListener("argumentsChanged", handleTabChange);
The basic tab switching works perfectly. I can go Tab1 → Tab2 → Tab3 and use Spotify’s back/forward buttons to navigate between them.
Here’s my problem: When I’m on Tab1, it shows a list of items. Clicking any item loads detailed content within the same tab. Now I’m stuck on this detail view and can’t get back to the original list.
Since Tab1 is still the active tab, clicking it again doesn’t do anything. The Spotify navigation buttons don’t help either because they only track tab changes, not content within tabs.
What’s the best way to handle this? Should I create separate pages for the detail views? Is there another event listener I should use? I feel like I’m missing something obvious about how Spotify apps should handle this kind of navigation pattern.
maybe try implementing a back button on your detail view? since tapping the tab doesn’t help, tracking the previous view is a good approach. I faced a similar issue and that worked for me! gl!
Yeah, this is super common with Spotify apps. I treat each tab like it has its own view stack instead of fighting with Spotify’s navigation system. I use a simple state variable to track if I’m showing the list or detail view in each tab. When someone clicks into a detail view, I just hide the list container and show the detail one - no actual navigation. Then I added a click handler to each tab that checks if it’s already active. If it is, it resets back to the root view. This keeps everything inside the existing tab structure but gives you proper back navigation. The thing is, Spotify’s navigation really only works for switching between tabs. Everything inside needs manual DOM manipulation and state management.
You’ll need to build your own navigation stack for each tab. Spotify’s API only handles switching between tabs - it won’t manage navigation inside them. I hit this same problem with my first Spotify app. Set up basic state management to track what view you’re on in each tab. When someone clicks into a detail view, save that new state and keep the old one. Then catch tab clicks when you’re already on that tab and pop back to your previous state instead. Just check if the current tab’s already active in your tab handler, then call your custom back function rather than doing nothing. Works great within Spotify’s framework and gives you the navigation control you’re after.
i just use hash navigation for this. set window.location.hash = ‘#detail-view’ when going into details, then listen for hashchange events to handle the back button. works well with spotify’s nav system and doesn’t mess with tab switching.