In the manifest.json file, you can update the DefaultTabs
property with arguments that correspond to nagivational tab names. In the Application
class, when tabs are clicked, the arguments property is updated. In this example, we are simply showing and hiding a <div /> element each time the arguments are updated.
{
...
"DefaultTabs": [
{
"arguments": "index",
"title": {
"en": "Home"
}
},
{
"arguments": "tabs",
"title": {
"en": "How to use tabs"
}
}
],
...
}
For a small app, showing and hiding certain elements on a page can be enough. However, a different approach would be to split the content in several HTML pages.
Links should look like this:
<a href="spotify:app:api-tutorial:mypage">A link to a page</a>
You can still navigate to an internal page using a link such as this:
<a href="/tutorial/mypage.html">An internal link to a page</a>
However, Spotify URIs are cleaner, don't expose implementation and work across Spotify, not only inside a given app. In addition, they manage tab highlighting. For instance, a link like this:
<a href="spotify:app:api-tutorial:tabs:section">A link to a section in the 'Tabs' tab</a>
Will highlight our second tab (the one with label 'How to use tabs') because the 'tabs' part in the URI matches the arguments set for that tab in the manifest.json file.