Themes: Complete Layout Guide
Master your app's structural design with comprehensive layout controls that shape how users navigate and interact with your application
What you'll learn:
- How to configure navigation orientation and display options
- How to optimize page width settings for different content types
- How to customize app titles and logos for brand consistency
- Best practices for creating cohesive, user-friendly layouts
The Layout section of Themes gives you control over your application's structural foundation. These settings work alongside your color and typography choices to create a professional, cohesive user experience that reflects your brand while optimizing usability.
Navigation Settings
Your navigation configuration directly impacts how users move through your application and access different features. Choose settings that match your content structure and user workflow patterns.
Navigation Orientation
Select the navigation layout that best serves your application's content and user needs:
Vertical Navigation
- Positions navigation elements along the left side of your application
- Provides ample space for navigation labels and menu items
- Good for apps with extensive page structures or complex hierarchies
- Maintains consistent navigation visibility across all screen sizes
- Ideal for data-heavy applications where horizontal screen space is valuable
Horizontal Navigation
- Places navigation elements across the top of your application
- Creates a familiar website-like navigation experience
- Maximizes vertical space for content display
- Works best for apps with streamlined navigation structures
- Provides an intuitive interface pattern for most users
Apps with many pages or complex menu structures typically perform better with vertical navigation, while simpler applications often benefit from the space-efficient horizontal approach
Navigation Display Controls
Show Pages in Navigation Menu
Toggle this setting to control whether your application pages appear in the main navigation menu. When enabled, users can access all available pages directly from the navigation interface. Disable this option to create a more streamlined experience by showing only essential pages or implementing alternative navigation methods.
Sticky Navigation
Enable sticky navigation to keep your navigation elements visible as users scroll through page content. This feature enhances usability by ensuring navigation options remain accessible without requiring users to scroll back to the top of the page. Sticky navigation proves particularly valuable for applications with long-form content or extensive data displays.
Navigation Visual Enhancements
Add Border
This option adds a subtle border around navigation elements, creating clear visual separation between the navigation area and main content. Borders help define the navigation space and improve the overall visual organization of your application interface.
Add Shadow
Shadow effects add depth and visual hierarchy to your navigation elements, creating a modern, layered appearance. Shadows make navigation elements appear to "float" above the main content, increasing their prominence and making them easier to distinguish from other interface elements.
Page Width Settings
Page width controls determine how your application content displays across different screen sizes and devices, ensuring optimal readability and visual appeal in all viewing contexts.
Width Configuration Options
Full Width
Full width configuration allows your application content to expand and fill the entire available screen space. This option maximizes your content display area and works exceptionally well for data-heavy applications, dashboards, and interfaces where screen real estate is valuable for displaying complex information.
Max Width
Maximum width settings prevent your content from becoming too wide on large screens, maintaining optimal readability and visual proportions. This setting proves particularly important for text-heavy applications where extremely wide lines can become difficult to read and scan effectively.
Width Measurement Options
Pixels
Pixel-based width settings provide precise control over your application's maximum width using absolute measurements. This option ensures consistent appearance across different devices and screen resolutions, making it ideal when you need exact control over layout dimensions for specific design requirements.
Percentage
Percentage-based width settings create responsive layouts that adapt proportionally to different screen sizes. This approach provides flexibility across various devices while maintaining consistent visual proportions relative to the available screen space, ensuring your application looks great on any device.
Tip: Percentage-based widths typically provide superior responsive behavior across different devices, while pixel-based widths offer more precise control for specific design requirements.
Navigation Width Coordination
Keep Navigation Full Width
This option ensures that navigation elements extend across the full width of the screen, even when page content is constrained to a maximum width. This setting helps maintain visual balance and ensures navigation remains prominent and accessible regardless of your content width settings.
Title & Logo Settings
Customize your application's brand presence with flexible title and logo options that reinforce your organization's identity while maintaining professional appearance.
App Title Display
Show App Title
Toggle this setting to control whether your application's title appears in the interface. Displaying the app title strengthens brand recognition and provides valuable context for users, particularly when your application is accessed through bookmarks or shared links.
Use Custom Title
The custom title option allows you to override the default application name with a customized title that better represents your brand or provides more descriptive information about your application's specific purpose and functionality.
Logo Integration
Upload a Custom Logo
Strengthen your brand presence by uploading your organization's logo to appear within your application interface. The logo upload feature supports common image formats and includes a sizing slider for optimal presentation. Your uploaded logo works alongside your title settings to create the perfect combination of text and visual branding elements.
Title Size Options
Title sizing affects both visual hierarchy and brand prominence within your application interface:
Small Title
Small titles provide subtle brand presence that doesn't compete with main content for user attention. This option works well for applications where content takes priority over branding, or when screen space is limited and needs to be maximized for functional elements.
Medium Title
Medium titles offer balanced brand visibility while maintaining primary focus on application content. This size typically works well for most business applications, providing clear brand identification without overwhelming the interface or distracting from user tasks.
Large Title
Large titles create prominent brand presence and establish strong visual hierarchy. This option is ideal for applications where brand recognition is critically important or when you want to create a bold, confident interface appearance that makes a strong first impression.
Note: Your title size should complement your overall design approach and consider the relative importance of branding versus content functionality in your specific application context.
Layout Best Practices
Navigation Design Strategy
When configuring navigation layout, carefully consider your users' workflow patterns and the structural complexity of your application. Applications with extensive page structures or complex hierarchies typically benefit from vertical navigation's expanded space for menu items, while simpler applications often work more effectively with horizontal navigation's space-efficient approach.
Test your navigation choices thoroughly across different devices and screen sizes to ensure usability remains consistent and intuitive. Mobile users often have different navigation needs than desktop users, and your layout choices should accommodate these differences to provide excellent user experiences across all platforms.
Page Width Optimization
Choose page width settings that optimize readability and usability for your specific content types. Text-heavy applications typically benefit from constrained widths that prevent lines from becoming too long and difficult to scan, while data-heavy applications might require full-width layouts to accommodate tables and complex information displays effectively.
Consider the primary viewing contexts where your application will be used. Applications primarily accessed on large desktop monitors might benefit from different width settings than those frequently used on tablets or smaller screens, and your configuration should reflect these usage patterns.
Title and Branding Balance
Balance brand visibility with functional usability when configuring title and logo settings. While strong branding can provide significant value for recognition and trust, it shouldn't interfere with users' ability to complete their tasks efficiently and effectively.
Consider how your title and logo choices integrate with your overall theme colors and typography to create a cohesive brand experience that enhances rather than distracts from application functionality and user workflow.
Testing Layout Changes
Use the Quick View feature extensively when making layout changes to observe how your choices affect the overall user experience in real-time. Pay particular attention to how navigation functions across different pages and how page width settings impact content readability and visual appeal.
Test your layout choices across different types of content within your application. Forms, data tables, detailed records, and summary pages might all respond differently to your layout settings, and comprehensive testing helps ensure consistent usability across all areas of your application.
Tip: Consider gathering feedback from actual users when making significant layout changes, as their workflow patterns and preferences might reveal usability considerations that aren't immediately apparent during design review sessions.
Updated 3 days ago