Introduction¶
The navigation section of any Nextcloud app is the left sidebar. It is basically composed of
- a primary action button
- a menu
- a settings area
The primary action button and the settings area are optional.
New button¶
Introduction¶
A primary action button is just a stylised button located above the navigation part of your app. The goal is to have an homogeneity of design across all apps using this button.
Basic layout¶
<div id="app-navigation">
<div class="app-navigation-new">
<button type="button" class="icon-add">
Add user
</button>
</div>
<!-- Your navigation here -->
<!-- Your settings here -->
</div>
Rules¶
- Stay simple, don’t use overcomplicated text in this button.
- Avoid using sentences longer than one line.
- Do not edit the styling of this button.
- Only one button is allowed here.
Settings¶
Introduction¶
To create a settings area create a div with the id app-settings
inside the app-navigation
div.
- The data attribute
data-apps-slide-toggle
slides up a target area using a jQuery selector and hides the area if the user clicks outside of it. - Max height of the settings area is 300px. Do not change that.
- Keep it clear, organized and simple.
Basic layout¶
<div id="app-navigation">
<!-- Your primary action button here -->
<!-- Your navigation here -->
<div id="app-settings">
<div id="app-settings-header">
<button class="settings-button"
data-apps-slide-toggle="#app-settings-content">
Settings
</button>
</div>
<div id="app-settings-content">
<!-- Your settings content here -->
</div>
</div>
</div>