# Finding Your Way *Navigating 34,000 pages without getting lost* --- An archive this size could easily become overwhelming. We've designed it to feel like a well-organized library instead of a maze. > **In this article:** Sidebar explorer · Breadcrumb trails · Previous/Next buttons · Alphabetical navigation · Mobile-friendly shortcuts ### The Sidebar On the left side of every page, you'll find the explorer—a tree-like view of all content: ``` +-----------------------------------------------------+ | SIDEBAR EXPLORER | +-----------------------------------------------------+ | | | v Bhagavad-gita As It Is # Click to navigate | | v Chapter 4 # Expands/collapses | | o Text 1 | | o Text 2 | | * Text 34 # Current page | | > Chapter 5 # Collapsed | | > Srimad-Bhagavatam | | > Sri Caitanya-caritamrta | | | +-----------------------------------------------------+ ``` Rather than showing raw folder names, it displays readable titles: | Folder | Display | |--------|---------| | `bg` | Bhagavad-gītā As It Is | | `sb` | Śrīmad-Bhāgavatam | | `cc` | Śrī Caitanya-caritāmṛta | | `books/kb` | KṚṢṆA Book | | `books/nod` | Nectar of Devotion | **Clicking folder names:** Takes you directly to that section's main page. **Clicking the arrow (>):** Expands or collapses the folder contents. There's also a "collapse all" button in the toolbar to reset the view when things get too expanded. ### Breadcrumbs At the top of each page, breadcrumbs show exactly where you are: ``` +-----------------------------------------------------+ | BREADCRUMB TRAIL | +-----------------------------------------------------+ | | | Bhagavad-gita As It Is > Chapter 4 > Text 34 | | ^ ^ ^ | | Click to go Click to Current | | to book index go to chapter page | | | +-----------------------------------------------------+ ``` **On mobile**, breadcrumbs shorten automatically to fit smaller screens: | Screen Size | Display | |-------------|---------| | Desktop (>430px) | Śrīmad-Bhāgavatam › Canto 1 › Chapter 2 › Text 3 | | Mobile (≤430px) | Bhāgavatam › Canto 1 › Chapter 2 › Text 3 | | Very small (≤374px) | SB › 1 › Ch 2 › 3 | | Tiny (≤320px) | SB › 1 › 2 › 3 | ### Previous and Next At the bottom of each page, navigation buttons let you continue reading in order: ``` +-----------------------------------------------------+ | PAGE NAVIGATION | +-----------------------------------------------------+ | | | [<- Previous] [Next ->] | | Text 33 Text 35 | | | | * Buttons pre-load the next page for speed | | | +-----------------------------------------------------+ ``` These buttons are "smart" - they know that after Chapter 4 comes Chapter 5, and after Text 34 comes Text 35. Hovering over them pre-loads the next page for faster navigation. ### Alphabetical Navigation For large index pages (50+ entries), a floating alphabet sidebar appears: ``` +-----------------------------------------------------+ | ALPHABET NAVIGATION | +-----------------------------------------------------+ | +---+ | | # A | A | | | ------------------------- | B | | | * Abhaya -- fearlessness [[...]] | C | | | * Abhidheya -- process of devotion | D | | | * Absolute Truth -- [[...]] |...| | | | Z | | | # B +---+ | | ------------------------- ^ | | * Bali Maharaja -- [[...]] Jump to | | | +-----------------------------------------------------+ ``` Click any letter to jump directly to that section. The navigation stays visible as you scroll. ### Letters and Lectures For spoken content and letters, the sidebar shows dates in a readable format. When you open a lecture page, a photo of Srila Prabhupada appears in the sidebar—a visual reminder of whose words you're reading. > **See also:** [[archive/about/media-features|Media Features]] for details on audio players and images. --- > [!question] Frequently Asked Questions > > **Q: How do I collapse all folders at once?** > Look for the toolbar button that collapses all folders in the sidebar. This is helpful when the tree gets too expanded and you want to start fresh. > > **Q: Do breadcrumbs work on mobile?** > Yes. Breadcrumbs automatically shorten on smaller screens. On very small phones, "Śrīmad-Bhāgavatam" becomes "SB" to fit. > > **Q: Why do some folder names have diacritics and others don't?** > We display proper Sanskrit transliteration (Bhagavad-gītā, Śrīmad-Bhāgavatam) in the sidebar. The underlying folders use simplified names (bg, sb) for technical compatibility. > > **Q: How does Previous/Next know what comes next?** > Each page has metadata indicating its neighbors. For sequential content like verses, this follows the natural reading order. > > **Q: Why doesn't the alphabet navigation appear on all pages?** > It only appears on index entry pages with 50 or more items—where it's actually useful. On smaller lists, you can scroll through easily. > > **Q: Can I navigate with keyboard shortcuts?** > Arrow keys work in [[archive/about/study-tools|Presentation Mode]] and the [[archive/about/media-features|Image Lightbox]]. Regular page navigation uses the buttons or sidebar. --- > [!abstract]- Technical Implementation Details > > Navigation in a large content archive requires careful architecture. > > **Folder Title Mapping** > > The `FolderTitles` module maintains 70+ path-to-title mappings (e.g., `bg` → "Bhagavad-gītā As It Is"). Special files like introductions have custom titles. > > **Folder Notes** > > The `FolderNotes` module makes folder titles clickable. Clicking the title navigates to the folder's index page; clicking the arrow expands/collapses. > > **Responsive Breadcrumbs** > > The `Breadcrumbs` module uses viewport detection with multiple breakpoints (320px, 374px, 414px, 430px). Different title sets for different sizes: > - Desktop: "Śrīmad-Bhāgavatam" > - Mobile: "Bhāgavatam" > - Tiny: "SB" > > **Page Navigation with Prefetching** > > The `PageNavigation` module prefetches next/previous pages on hover using `<link rel="prefetch">`. Navigation reads from YAML frontmatter with retry logic for mobile. > > **Alphabetical Navigation** > > The `AlphabeticalNav` module creates floating A-Z navigation for lists with 50+ items. Styled as fixed sidebar, hidden on mobile. > > *See also: [[archive/about/cross-references|Cross-References]] for backlinks and embeds.*