Gin Toolbar
Helper module that brings the Gin admin toolbar to the frontend of Drupal sites, enabling authenticated users to access the administration toolbar while viewing frontend pages.
gin_toolbar
インストール
composer require 'drupal/gin_toolbar:^3.0'
composer require 'drupal/gin_toolbar:^2.1'
composer require 'drupal/gin_toolbar:8.x-1.1'
概要
Gin ToolbarはGin Admin Themeのコンパニオンモジュールで、管理ツールバーの機能をDrupalサイトのフロントエンドに拡張します。Drupalテーマの技術的な制限により、Ginテーマはフロントエンドページにスタイル付きツールバーを自動的にレンダリングできません。このモジュールは、Ginスタイルのツールバーをバックエンドとフロントエンドの両方で一貫して表示するために必要なフック、テンプレート、サービスを提供することで、そのギャップを埋めます。
このモジュールはGinテーマの設定とシームレスに統合され、アクセントカラー、フォーカスカラー、ダークモード設定、ハイコントラストモードをフロントエンドツールバーに自動的に適用します。クラシックツールバー、水平ツールバー、実験的なDrupalナビゲーションスタイルなど、複数のツールバーバリアントをサポートしています。
Gin Toolbarは、フロントエンドでコンテンツを表示または編集する際にも、管理階層内の現在位置をユーザーに表示する、強化されたアクティブトレイル検出機能も提供します。これにより、コンテンツの表示と編集間のナビゲーションがより直感的になります。
Features
- Gin管理ツールバーをフロントエンドページに拡張し、認証済みユーザーが公開サイトを閲覧しながら管理機能にアクセスできるようにします
- 複数のツールバーバリアントをサポート：クラシック（垂直サイドバー）、水平（トップバー）、新しいナビゲーション（実験的なDrupalナビゲーションスタイル）
- コンテンツ、メディア、ユーザー、その他のエンティティを表示または編集する際に、管理メニュー内の現在位置をハイライトするインテリジェントなアクティブトレイル検出
- アクセントカラー、フォーカスカラー、ダークモード、ハイコントラストモードを含むGinテーマ設定との自動統合
- 「[コンテンツタイトル]を編集」や「管理画面に戻る」などのコンテキストリンクを表示するフロントエンド用セカンダリツールバーで、素早いナビゲーションを実現
- Drupal CoreのNavigationモジュールとのシームレスな互換性、アクティブ時にCoreナビゲーションを適切にスタイリング
- Admin Toolbarモジュールとの統合による拡張メニュー深度（最大4レベル以上で設定可能）
- Media Libraryとの統合、メディアブラウザコンポーネントにGinスタイリングを適用
- リッチテキストエディタ内での一貫した外観を確保するCKEditorスタイリング統合
- コンテンツモデレーションワークフローのためのWorkbenchモジュール互換性
- パフォーマンス最適化のための「gin-toolbar-」プレフィックス付きキャッシュIDを使用したアクティブトレイルのカスタムキャッシュ戦略
Use Cases
Content editor workflow
A content editor logs into the site and navigates to view published articles on the frontend. With Gin Toolbar enabled, they see the familiar Gin admin toolbar on every frontend page, allowing them to quickly access the 'Content' menu to manage articles, or click 'Edit [Article Title]' in the secondary toolbar to directly edit the page they're viewing without navigating back to the admin backend.
Multi-site administration
An administrator managing multiple Drupal sites using Gin theme benefits from consistent toolbar appearance across frontend and backend. When they switch between viewing content and editing configuration, the toolbar remains consistent, reducing cognitive load and improving efficiency.
Theme preview during development
A theme developer previewing a new frontend theme can access all admin functions directly from the frontend without switching contexts. This enables rapid iteration when adjusting layouts, checking responsive behavior, and making content changes.
Client training sessions
When training clients on content management, the consistent Gin toolbar on frontend pages helps demonstrate the connection between viewing content and editing it. The 'Edit [Content Title]' link in the secondary toolbar provides an intuitive entry point for explaining content editing workflows.
Dark mode consistency
Users who prefer dark mode for reduced eye strain benefit from Gin Toolbar's automatic dark mode inheritance. Whether they're in the admin backend or viewing frontend content, the toolbar appearance remains consistent with their dark mode preference set in Gin theme settings.
Tips
- Gin Toolbar inherits all settings from the Gin theme - configure toolbar variant, colors, and dark mode at /admin/appearance/settings/gin
- The module automatically reorders toolbar items for better UX, placing search at the start and user menu at the end
- For sites using Admin Toolbar module, menu depth is automatically respected (up to 4 levels by default)
- The secondary toolbar provides contextual 'Edit' links - users can quickly edit content they're viewing on the frontend
- When using dark mode, the toolbar will automatically switch modes based on Gin theme settings or system preferences
- Custom CSS can be applied via public://gin-custom.css file, which the module automatically detects and loads
- The module supports both the legacy toolbar and the new core Navigation module introduced in recent Drupal versions
Technical Details
Hooks 12
hook_preprocess_html
Adds Gin-specific HTML attributes and classes including accent color, focus color, high contrast mode, and toolbar variant class. Also handles Navigation module integration and maintenance page styling.
hook_page_attachments_alter
Attaches Gin theme libraries (base, accent, init) and exposes Gin settings to JavaScript (darkmode, colors, high contrast). Attaches appropriate toolbar style library based on variant setting.
hook_library_info_alter
Modifies core libraries to include Gin-specific dependencies for dialogs, CKEditor, AJAX, and Media Library components.
hook_preprocess_toolbar
Adds user picture lazy builder, exposes toolbar variant and secondary toolbar settings, reorders toolbar tabs (moves search to start, user to end), and provides entity edit URLs for contextual navigation.
hook_preprocess_menu
Adds gin_id attribute to toolbar menu items and reorders menu items, moving config and help to the end.
hook_toolbar_alter
Sets user tab weight to 1000 (after devel's 999) and registers GinToolbar::preRenderTray as the pre-render callback for the administration tray.
hook_ckeditor_css_alter
Adds Gin theme CSS files (variables, accent, ckeditor) to CKEditor instances for consistent styling.
hook_css_alter
Adjusts CSS group priority for Gin dialog styles to ensure they load after theme CSS.
hook_theme
Defines custom theme hooks for navigation regions and container elements when Navigation module is not active.
hook_theme_registry_alter
Alters theme registry to point toolbar-related templates to the gin_toolbar module's templates directory.
hook_requirements
During installation, verifies that the Gin theme is installed. Displays error if Gin is not available and not part of the install profile.
hook_requirements_alter
Removes the core toolbar requirement to prevent conflicts.
Troubleshooting 6
Verify the user has 'access toolbar' or 'access navigation' permission. Check that Gin theme is properly set as the administration theme at /admin/appearance. Clear all caches after enabling the module.
The Gin Admin Theme must be installed before Gin Toolbar. Install Gin first with 'composer require drupal/gin' and enable it as the admin theme, then install Gin Toolbar.
Clear theme registry and all caches. Ensure you're using compatible versions of Gin theme and Gin Toolbar. Check that no custom CSS is overriding Gin styles.
The active trail caching may need clearing. Run 'drush cr' or clear caches at /admin/config/development/performance. The module uses 'gin-toolbar-' prefixed cache IDs for active trail.
The Edit link only appears when viewing entity pages where the user has edit access. Check that the user has permission to edit the content type and that the entity has an edit-form link template.
Gin Toolbar is designed to work with core Navigation. Ensure both Gin theme and Gin Toolbar are updated to versions that support core Navigation. The module automatically detects Navigation module and adjusts behavior accordingly.
Security Notes 4
- Users must have 'access toolbar' or 'access navigation' permission to see the toolbar - this is checked on every page load
- The module respects all existing Drupal access controls - menu items only appear if the user has permission to access them
- Entity edit links in the secondary toolbar only appear if the user has edit permission for that specific entity
- The module does not expose any new permissions or configuration forms that could be exploited