Breadcrumbs
인증된 제출자tabuna/breadcrumbs
제출자 이우진Laravel 앱에 브레드크럼을 손쉽게 추가할 수 있는 패키지입니다.
Breadcrumbs — 라라벨 브레드크럼
소개
브레드크럼(Breadcrumbs)은 사용자가 사이트 계층 구조에서 현재 어느 위치에 있는지 보여주는 탐색 링크 목록입니다. 예를 들어 홈 / 공지사항 / 수정과 같은 브레드크럼은 사용자가 특정 공지사항의 수정 페이지를 보고 있음을 알려줍니다. 각 항목을 클릭하면 해당 페이지로 바로 이동할 수 있습니다.
이 패키지는 Laravel 프레임워크에서 브레드크럼을 손쉽게 구성할 수 있도록 도와줍니다.
설치
터미널에서 아래 명령어를 실행합니다:
composer require tabuna/breadcrumbs명령어를 실행하면 composer.json이 업데이트되고 패키지가 vendor/ 디렉터리에 설치됩니다.
브레드크럼 정의하기
브레드크럼은 라우트 파일에서 직접 정의할 수 있습니다:
use Tabuna\Breadcrumbs\Trail;
// 홈
Route::get('/', fn () => view('home'))
->name('home')
->breadcrumbs(fn (Trail $trail) =>
$trail->push('홈', route('home'))
);
// 홈 > 소개
Route::get('/about', fn () => view('about'))
->name('about')
->breadcrumbs(fn (Trail $trail) =>
$trail->parent('home')->push('소개', route('about'))
);->parent('home')을 호출하면 home 라우트의 브레드크럼을 부모로 이어받습니다. 이를 통해 계층 구조를 자연스럽게 표현할 수 있습니다.
라우트 파라미터도 활용할 수 있습니다. 파라미터는 이름으로 자동 해석됩니다:
Route::get('/category/{category}', function (Category $category) {
// $category는 Eloquent 모델 인스턴스입니다.
// ...
})
->name('category')
->breadcrumbs(fn (Trail $trail, Category $category) =>
$trail->push($category->title, route('category', $category->id))
);라우트 자동 감지
코드를 더 간결하게 작성하고 싶다면 route() 호출 결과 대신 라우트 이름 문자열을 직접 넘겨도 됩니다. 아래 두 선언은 동일하게 동작합니다:
// route() 헬퍼를 사용한 방식
Route::get('/', fn () => view('home'))
->name('home')
->breadcrumbs(fn (Trail $trail) =>
$trail->push('홈', route('home'))
);
// 라우트 이름 문자열을 바로 넘기는 방식 (더 간결)
Route::get('/', fn () => view('home'))
->name('home')
->breadcrumbs(fn (Trail $trail) =>
$trail->push('홈', 'home')
);별도 브레드크럼 파일 사용하기
브레드크럼 정의를 라우트 파일과 분리해서 관리하고 싶다면, 서비스 프로바이더에서 별도 파일을 불러오는 방식을 사용할 수 있습니다:
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class BreadcrumbsServiceProvider extends ServiceProvider
{
/**
* 애플리케이션 이벤트를 부트스트랩합니다.
*/
public function boot(): void
{
require base_path('routes/breadcrumbs.php');
}
}그러면 routes/breadcrumbs.php 파일을 별도로 만들어 브레드크럼만 모아서 관리할 수 있습니다:
// routes/breadcrumbs.php
// 사진 목록
Breadcrumbs::for('photo.index', fn (Trail $trail) =>
$trail->parent('home')->push('사진', route('photo.index'))
);리소스 라우트에서 사용하기
Route::resource()를 사용하면 여러 라우트가 한 번에 등록됩니다. 이 경우 브레드크럼은 각 라우트에 대해 직접 지정해야 합니다:
// routes/web.php
Route::resource('photos', 'PhotoController');NOTE
라우트 파일은 캐시될 수 있으므로, 리소스 라우트의 브레드크럼은 서비스 프로바이더의 boot() 메서드 안에서 정의하는 것이 안전합니다.
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Tabuna\Breadcrumbs\Breadcrumbs;
use Tabuna\Breadcrumbs\Trail;
class BreadcrumbsServiceProvider extends ServiceProvider
{
/**
* 애플리케이션 서비스를 부트스트랩합니다.
*/
public function boot(): void
{
Breadcrumbs::for('photos.index', fn (Trail $trail) =>
$trail->push('사진 목록', route('home'))
);
Breadcrumbs::for('photos.create', fn (Trail $trail) =>
$trail
->parent('photos.index', route('photos.index'))
->push('사진 추가', route('home'))
);
}
}Blade 컴포넌트로 출력하기
Blade 컴포넌트를 사용하면 브레드크럼을 간단하게 렌더링할 수 있습니다:
<ul>
<x-tabuna-breadcrumbs/>
</ul>목록 아이템의 CSS 클래스를 지정할 수도 있습니다:
<x-tabuna-breadcrumbs
class="item"
active="active"
/>파라미터를 직접 전달하는 것도 가능합니다:
<x-tabuna-breadcrumbs
:parameters="[
'foo' => '대시보드',
'baz' => '사용자',
'buzz' => '프로필 수정'
]"
/>특정 네임드 라우트를 명시적으로 지정할 수도 있습니다:
<x-tabuna-breadcrumbs
route="static"
/>Blade 뷰에서 직접 출력하기
컴포넌트 대신 Blade 뷰에서 직접 루프를 돌려 출력할 수도 있습니다:
@if(Breadcrumbs::has())
@foreach (Breadcrumbs::current() as $crumbs)
@if ($crumbs->url() && !$loop->last)
<li class="breadcrumb-item">
<a href="{{ $crumbs->url() }}">
{{ $crumbs->title() }}
</a>
</li>
@else
<li class="breadcrumb-item active">
{{ $crumbs->title() }}
</li>
@endif
@endforeach
@endif위 코드를 사용하면 다음과 같이 렌더링됩니다:
홈 / 소개
크레딧
이 패키지는 Dave James Miller의 패키지와 Dwight Watson의 패키지에서 영감을 받아 코드 일부를 활용하여 만들어졌습니다. 기존 패키지들의 장점을 살리면서, 브레드크럼 정의를 라우트 선언과 함께 관리할 수 있도록 개선한 것이 이 패키지의 핵심입니다.
라이선스
MIT 라이선스를 따릅니다. 자세한 내용은 LICENSE 파일을 확인하세요.