YouTip- `) of links inside a container element and assign the `data-role="navbar"` attribute to that container.
### Basic Syntax and Structure
```html
```
### Column Width Allocation
By default, standard HTML buttons expand or shrink based on their text content. However, jQuery Mobile navbars use an unordered list to divide button widths equally across the screen:
* **1 button:** Takes up 100% of the width.
* **2 buttons:** Each takes up 50% of the width.
* **3 buttons:** Each takes up 33.3% of the width.
* **4 buttons:** Each takes up 25% of the width.
* **5 buttons:** Each takes up 20% of the width.
> **Note:** If a navbar contains **more than 5 buttons**, jQuery Mobile will automatically wrap the buttons into multiple rows (e.g., a 6-button navbar will wrap into two rows of 3 buttons).
---
## Adding Icons to Navbar Buttons
You can enhance your navigation buttons by adding icons using the `data-icon` attribute.
### Example
```html
- Search ``` The value of the `data-icon` attribute corresponds to standard jQuery Mobile icon names. While CSS classes use the format `ui-icon-`, the HTML5 data attribute uses `data-icon=""`. ### Common Icon Values | Attribute Value | Description | | :--- | :--- | | `data-icon="home"` | Home icon | | `data-icon="arrow-r"` | Right-pointing arrow | | `data-icon="search"` | Magnifying glass search icon | --- ## Positioning Navbar Icons By default, navbar button icons are positioned **above** the text label (`data-iconpos="top"`). You can customize this alignment by adding the `data-iconpos` attribute to the **navbar container**. ### Icon Position Options | Attribute Value | Description | | :--- | :--- | | `data-iconpos="top"` | Positions the icon above the text (Default) | | `data-iconpos="bottom"` | Positions the icon below the text | | `data-iconpos="left"` | Positions the icon to the left of the text | | `data-iconpos="right"` | Positions the icon to the right of the text | ### Example: Left-Aligned Icons ```html ``` --- ## Managing Active and Persistent States When a user taps a link in a navbar, the button briefly transitions to an active (pressed/highlighted) state. You can control and persist this behavior using specific CSS classes. ### Setting a Default Active Button To make a button appear active by default when the page loads, add the `ui-btn-active` class to the anchor (``) tag: ```html
- Home ``` ### Creating Persistent Navbars In multi-page setups, you want the active state of a navbar button to persist and match the page the user is currently viewing. To prevent the active state from flickering or resetting during page transitions, add both the `ui-btn-active` and `ui-state-persist` classes to the active link: ```html
- Home ``` --- ## Advanced Implementation Examples ### 1. Navbar Inside the Content Area While navbars are typically placed in headers or footers, they can also be placed directly inside the main content container (`data-role="content"`). ```html ``` ### 2. Footer Navbar with Bottom-Aligned Icons Placing a navbar inside a footer is a common design pattern for mobile application tab bars. ```html ``` ### 3. Multi-Row Navbar (More than 5 Buttons) When you exceed 5 buttons, jQuery Mobile wraps them cleanly into a grid layout. ```html ```
Jquerymobile Navbars
# jQuery Mobile Navbars: A Comprehensive Developer's Guide
A navigation bar (navbar) consists of a group of horizontally aligned links, typically housed inside a header or footer. In jQuery Mobile, navbars are highly responsive, touch-friendly, and automatically styled to fit mobile screens.
---
## Introduction to jQuery Mobile Navbars
By default, links inside a jQuery Mobile navbar are automatically styled as buttons without requiring the `data-role="button"` attribute.
To define a navbar, wrap an unordered list (`