navigation

erb
<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

Speed up perceived performance with Turbo preload links

rails hotwire turbo
by codesnips 3 tabs
swift
import SwiftUI

enum Route: Hashable {
    case postDetail(id: Int)
    case userProfile(id: Int)
    case settings

Navigation patterns with NavigationStack

swift swiftui navigation
by Sofia Martinez 2 tabs
xml
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/postsFragment">

Navigation Component for app navigation

kotlin android navigation
by Alex Chen 3 tabs
kotlin
package com.example.myapp.ui

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity

Deep linking and App Links

kotlin android deep-linking
by Alex Chen 2 tabs
erb
<nav id="main-navbar"
     data-turbo-permanent
     data-controller="navbar"
     data-navbar-menu-open-value="false"
     class="navbar">
  <div class="navbar-inner">

Keep navbar state across Turbo navigations with data-turbo-permanent

rails hotwire turbo
by codesnips 3 tabs
erb
<div class="layout" data-controller="sidebar">
  <aside class="sidebar">
    <%= render "shared/sidebar", active: params[:controller] %>
  </aside>

  <main class="content-area">

Scoped navigation inside a sidebar with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
erb
<div class="orders-layout" data-controller="drawer">
  <table class="orders">
    <tbody>
      <% @orders.each do |order| %>
        <tr>
          <td><%= order.reference %></td>

Turbo Frames: inline “details drawer” without a SPA router

rails hotwire turbo
by codesnips 4 tabs
ruby
class ProductsController < ApplicationController
  PER_PAGE = 24

  def index
    @page = [params[:page].to_i, 1].max
    @sort = %w[name price recent].include?(params[:sort]) ? params[:sort] : "recent"

Use data-turbo-action to control history (advance vs replace)

rails hotwire turbo
by codesnips 3 tabs
swift
import UIKit

protocol Coordinator: AnyObject {
    var navigationController: UINavigationController { get set }
    var childCoordinators: [Coordinator] { get set }

Coordinator pattern for navigation flow

swift architecture coordinator
by Sofia Martinez 3 tabs
ruby
Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo
by codesnips 4 tabs
erb
<div class="layout" data-controller="viewport">
  <%= turbo_frame_tag "master", class: "master-pane" do %>
    <h1>Products</h1>
    <ul class="product-list">
      <% @products.each do |product| %>
        <li>

Turbo Frames: conditional frame navigation for mobile vs desktop

rails hotwire responsive
by codesnips 4 tabs
typescript
import { Link, useLocation, useMatches } from 'react-router-dom'

interface BreadcrumbMatch {
  pathname: string
  handle?: {
    crumb?: (data?: any) => string

Breadcrumb navigation from React Router

react react-router navigation
by Maya Patel 2 tabs